3

正如您在屏幕截图中看到的：在此处输入图像描述

订单不是那么完美。我喜欢安排文章没有任何间隙。像这样的意思：

在此处输入图像描述

有什么想法可以通过 CSS/CSS3 或 javascript 进行管理吗？非常感谢！

4

4 回答 4

7

恐怕这就是浮动在 CSS 中的工作方式。您可能想尝试使用jQuery Masonry来实现您想要实现的目标。

于 2013-03-07T10:19:12.603 回答
3

您可以使用 CSS，但问题是，该属性仅支持 >IE10。然后你可以回退到 jQuery Masonry

http://jsfiddle.net/4gXCs/

.col {
   -moz-column-count:2; 
   -webkit-column-count:2; 
   column-count:10px;
   -moz-column-gap:10px;
   -webkit-column-gap:10px; 
   column-gap:2;
}
于 2013-03-07T10:25:32.787 回答
1

您可能需要使用masonry plugin

http://masonry.desandro.com/

于 2013-03-07T10:19:34.007 回答
-1

你的意思是这样的吗？

工作小提琴

使用两个垂直 div 完成

<div class="one">
    <div class="leftTop"></div>
    <div class="leftBot"></div>
</div>
<div class="two">
    <div class="rightTop"></div>
    <div class="rightBot"></div>
</div>
于 2013-03-07T10:47:22.743 回答