JavaScript DOM方法插入新行

Question

这是我想要的用户界面：

+----+----+----+
|    |    |    |
+----+----+----+ 
|    |    |    |
+----+----+----+

这可以通过如下打印HTML来实现：

<div></div><div></div><div></div><div></div><div></div><div></div>

像这样打印HTML：

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

结果：

+----++----++----+
|    ||    ||    |
+----++----++----+
+----++----++----+ 
|    ||    ||    |
+----++----++----+

如果你可以想象它，上面的问题是div元素彼此不相同。这是由于HTML中显示的空格。

所以这就是问题所在：

 for(i=0;i<6;i++)
     document.body.appendChild(document.createElement("div"));

产生后者。

如何在不将font-size设置为0的情况下生成前者？

Answer 1

你的CSS应该是：

.div {
    float: left;
    width: 33.333333333333333%;
}

还要确保它们没有margin，padding或border，因为这些属性会影响元素的宽度。

如果您希望他们拥有这三个属性中的一个，那么请阅读CSS box model。

TL; DR暗示，CSS顶部的这个片段会让你的元素的宽度和高度属性表现得像你通常期望的那样，如果你是CSS的新手：

*, *:before, *:after {
    box-model: border-box;
}
html {
    box-model: inherit;
}