使div元素更紧密地放在一起，这样行之间就没有边距了。

Question

我希望div保持更近的距离，所以第二行是准确的，div没有边距。

这是我的div：

.post {box-sizing: border-box;display: block;float: left;font-size: 12px;margin: 0 15px;20px 0;padding: 0;text-align: center;width: 310px;background: none repeat scroll 0 0 #fff;border-radius: 4px;box-shadow: 0.5px 1px 3px 0 #d5d5d5;padding: 15px 15px 10px;}

下面是它看起来的样子：

​

Answer 1

据我所知，不能用CSS实现这一点。

您肯定需要一个JS解决方案，比如：http://masonry.desandro.com/

Answer 2

如果您不想使用任何js库，只需创建左浮动div(列)。这样，每张明信片就会在上一张之后正确显示。

就像这样：

<div class="column">
    post1, post2, ...
</div>
<div class="column">
    post1, post2, ...
</div>
<div class="column">
    post1, post2, ...
</div>

<style>
    .column {float:left;}
</style>