多个浮动左派不会浮每个留下难看的空白

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来紧跟在测试1相反，在test2完成之前还有一个空间。同样的问题也可以在firefox中看到。

Answer 1

当一个浮动元素流到下一行时，它将出现在导致它包裹的前一个浮动元素的下面。如果这是不受欢迎的行为，您可能需要做的是更改层次结构 - 为左列（50％）容纳一个容器，为右列容纳另一个容器（另外50％）。然后列出每个元素中的元素：

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

Answer 2

您无法用纯HTML/CSS修复很好。 JavaScript可以做到这一点。对于jQuery，有一个Masonry插件，它完全可以做到这一点。

砌体是jQuery的布局插件。把它看作CSS浮动的另一面。而浮动水平然后垂直排列元素，砌体按照网格垂直然后水平排列元素。结果可以最大限度地减少不同高度元素之间的垂直间隙，就像石匠在墙上镶嵌石块一样。

在其主页上，您可以在野外找到现场演示和几个示例。