html - 多个 float 左边不会 float 在每个留下难看的空白

Question

当使用以下 html 示例时:

<div style="width:50%;float:left;">
    test1<br/>
    test1<br/>
    test1<br/>      
</div>
<div style="width:50%;float:left">
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>
    test2<br/>      
</div>
<div style="width:50%;float:left">
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>
    test3<br/>      
</div>

test1 和 test3 之间有一个丑陋的差距，我希望 test3 div 紧跟在 test1 下面，而不是在 test2 完成之前有一个空间。同样的问题也可以在 firefox 中看到。

Answer 1

当 float 元素流向下一行时，它将出现在导致其换行的前一个 float 元素下方。如果这是不受欢迎的行为，您可能需要做的是更改层次结构 - 为左列 (50%) 提供一个容器，为右列提供另一个容器(另外 50%)；然后是每个元素中的元素列表:

(psuedo-code):
<left 50%>
 <test1/>
 <test3/>
</left>
<right 50%>
 <test2/>
</right>