使div元素更加靠近，因此行之间没有边距

Question

我希望div更紧密地联系在一起，所以第二行不准确且div没有余量

这是我的div css：

.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解决方案，比如Masonry：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>