使用 javascript 循环,我试图用使用视口(viewport)百分比宽度和高度调整大小并具有 float:left 的 div 覆盖主体。
这意味着这些 div 中的 100 个应该覆盖整个视口(viewport)。然而,它不是那样工作的,而是将第 10 个向下移动一行。
Javascript
for (var i=0; i<10; i++){
var newDiv = document.createElement('div');
newDiv.className= 'square';
document.body.appendChild(newDiv);
}
CSS
.square {
width: 10vw;
height: 10vh;
background-color: aqua;
float: left;
}
.square:hover {
background-color:red;
}
我已将正文的边距设置为 0。当我制作 100 个这样的 div 时,问题就出现了。
最佳答案
因为 body 上的边距。元素的大小相对于整个视口(viewport),但由于 body 上的默认边距,body 宽度小于此值。
https://jsfiddle.net/msqjd27y/1/
只需添加
正文{ margin :0; }
如果您想要保持 body 的边距,并且仍然需要 10 个元素,则您不想使用视口(viewport)单位。您可以像这样使用 width: 10%
https://jsfiddle.net/msqjd27y/2/
关于javascript - 与 float 和视口(viewport)百分比单位的奇怪交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35299524/