Question

我使用了4种不同的方法来并排对齐嵌套的div。我希望这四种方法是正确的，但只有一种方法是正常的（浮动）。有人能解释一下原因吗？

<div style="background-color:black; width:100px; height:100px;">
    <span style="background-color:red;width:70%;height:100%;"></span>
    <span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
    <div style="background-color:red;width:70%;height:100%;display:inline"></div>
    <div style="background-color:blue;width:30%;height:100%;display:inline"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
    <div style="background-color:red;width:70%;height:100%;float:left"></div>
    <div style="background-color:blue;width:30%;height:100%;float:left"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
    <div style="background-color:red;width:70%;height:100%;display:inline-block"></div>
    <div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>

Or JSFiddle

提前致谢。

Answer 1

<span>不是块元素，因此它没有宽度和高度。
同样适用于<div>设置为display: inline。
这可以按预期工作。
您可以删除div之间的空白区域以使其正常工作。设置为inline-block的元素在它们之间有一个空格，就像两个单词一样。这就是为什么你也可以设置font-size: 0;，它会起作用。
你可以和＃3一样，但position: absolute。

Answer 2

这很痛苦......但是第一个，span是一个内联元素，第二个是设置了style="inline"的div。这意味着他们不会接受任何高度或宽度样式，因为它们不是块！

Answer 3

您的第一个示例使用SPAN，SPAN是内联元素，因此您无法为它们应用高度或宽度。

您的第二个示例，您正在更改BLOCK元素（DIV），但将其更改为内联元素无法对它们应用高度或宽度。

浮动元素会将其从文档流中移除，因此应用了不同的规则，您可以应用宽度和高度

如果删除2嵌套DIVS之间的空白区域，则最后一个示例将起作用：

<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div><div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>

http://jsfiddle.net/kKScJ/76/

Answer 4

试试这个：

将div内联style代码设为float:left;

它给对齐div所有都是一边

<div style="background-color:black; width:100px; height:100px;float:left;">
   <span style="background-color:red;width:70%;height:100%;"></span>
   <span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<div style="clear:both;"></div>
<div style="background-color:black; width:100px; height:100px;float:left;">
    <span style="background-color:red;width:70%;height:100%;float:left;"></span>
    <span style="background-color:blue;width:30%;height:100%;float:left;"></span>
</div>

如何在另一个div中并排divs

4 个答案: