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

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

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

Answer 2

使用纯HTML / CSS无法解决这个问题。然而，JavaScript可以做到这一点。对于jQuery，有一个Masonry插件就是这样做的。

Masonry是jQuery的布局插件。把它想象成CSS浮动的另一面。浮动水平然后垂直排列元素，而砌体根据网格垂直然后水平排列元素。结果最大限度地减少了不同高度的元素之间的垂直间隙，就像在墙上安装石头的石匠一样。

在它的主页上你可以找到一个现场演示和一些野外的例子。

多个浮子左移不会漂浮在每个留下丑陋的白色空间

2 个答案: