漂浮的Div不完全。如何以正确的方式安排他们？

Question

如截图所示：

订单并不完美。 我喜欢安排文章没有任何空白。 这样的意思：

我有什么想法可以通过CSS / CSS3或javascript来管理它？非常感谢！

Answer 1

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

Answer 2

您可以使用CSS，但问题是，该属性仅支持＆gt; 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;
}

Answer 3

您可能需要使用masonry plugin

<强> http://masonry.desandro.com/

Answer 4

你的意思是这样吗？

<强> Working Fiddle

使用两个垂直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>