與浮游物和視口百分比單位的奇怪互動

使用一個JavaScript循環我試圖用尺寸使用視口百分比寬度和高度，並具有浮動：左。與浮游物和視口百分比單位的奇怪互動

這意味着100個這些div應該覆蓋整個視口。然而，它不會那樣工作，相反，它會將第十名下移一行。

的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; 
}

Fiddle

我有邊距設置爲0的身體。當我製作100個這樣的div時，問題就出現了。

來源

2016-02-09 Travis M

HTML，身體{保證金：0; } –

由於身體的利潤率。元素的大小與整個視口相關，但由於主體上的默認邊距，主體寬度小於此值。

https://jsfiddle.net/msqjd27y/1/

只需添加 body { margin: 0; }

如果你想保持利潤的身體，還是要10元，你不想使用視單位。你可以使用width: 10%這樣https://jsfiddle.net/msqjd27y/2/

來源

2016-02-09 18:33:23

當你將它設置爲100個時，它仍然有一個缺口在右邊。 –

特拉維斯，我沒有得到100時的差距：https://jsfiddle.net/msqjd27y/3/ –

我希望它覆蓋整個視口。所以我把寬度保持爲10vw。當它設置爲10vw時，就會出現間隙。 https://jsfiddle.net/msqjd27y/4/ –

你的問題是與人體元素，你必須寫一個這樣的CSS規則：體{保證金：0}爲您解決問題

來源

2016-02-09 18:37:49

與浮游物和視口百分比單位的奇怪互動

回答

相關問題