javascript - 为什么我的 div 元素不直接位于彼此之上？

Question

我这里有一个 JSFiddle:http://jsfiddle.net/5gvv27rr/5/

这样做是在同一行创建您想要的每一个 div 元素。 然后根据它的编号 div 将它们分开。

例如: 假设我输入数字 3。主 div 将分成 3 个 div。然后第一个将保持为 1 div。第二个将分成两个 div，第三个将分成 3 个，依此类推。

这很好用。然而，就好像 div 不是在父 div 之上开始的。我使用了这段代码，所以把边框放在里面而不是外面:

.childDiv{
    background-color: white;
    float:left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 2px;
    border-style: solid;
    border-color: black;
    opacity: 1;    
}

但它仍然好像显示了边框，使 div 移动到下一行？

有什么想法吗？

Answer 1

我不确定所需的行为。

是这样的:jsfiddle ？

问题在于 childDiv(包含子元素的 div)的宽度由于其边框而小于包含的 div。

我改变的东西:

.childDiv{
    border: 0px;
    display:inline-block;
} 
.secondChildDiv{
        display:inline-block;
}

我使用 display:inline-block; 而不是 float 因为这样你就不需要 clear:both :)

如果这有帮助，请告诉我，

阿尔贝托