关于动态新冠疫情地图遇到的第二个问题

前言

博主跟着视频做动态地图，又双叒叕出问题了，视频里老师用 position: absolute绝对定位后设置width和height非常完美，但轮到了博主上手的时候，width设置就失效了QAQ

问题截图

我们可以看到，截图里面除了width,其他都是蓝色的（即已生效状态），最后出来的效果是这样的

奇丑无比（浅灰色是div的范围，深灰色是body底色），页面内除了高度是根据博主的百分比设定的，宽度并没有撑开，是根据标签内容的宽度展开的

问题原因

但是博主在网上查询以后，发现其他人的问题都是高度百分比失效（原因是没有设定父级的百分比），没有宽度百分比失效的，好了又是独一份的问题，但博主不会放弃！
根据相同思路，既然高度百分比失效是没有设定父级百分比的原因，那么宽度百分比失效是否也是这个原因呢？
于是博主重新为body与html标签设定高度百分比，但毫无用处，该丑的还是继续丑
博主毫无办法，只能放弃从网上找答案，开始调试代码，最后发现，只要删除

position: absolute;//绝对定位

这一行代码，宽度就毫无问题，那么，应该就是绝对定位的问题了
经过查询博主发现了原因：
父元素的宽度是由里面的子元素撑开的，而绝对定位的子元素由于脱离了父元素文本结构，所以是撑不开父元素的。不但撑不开，而且还会受到父元素宽度的限制。
于是就形成了图片中的丑样子

解决方法

那我们换种思路，既然无法通过设置宽度来撑开，那我们就将width改成auto模式，即不设置百分比，通过设置left与right来将宽度撑开，然后，我就成功啦！！！如图：