CSS - 使用浮动div自动填充空格

Question

我正在尝试在http://www.gablabelle.com/创建网格布局。

我有多个div（图像），浮点数：左;属性，我想知道为什么有一些空的空间，为什么浮动的div没有填补空白。

非常感谢您的时间和帮助。

更新：我现在使用jQuery同位素但仍然存在差距......任何想法？

Answer 1

这就是浮动的运作方式。那些差距就在那里，因为元素在另一个中断后会浮动到一个新行。它没有填满上面的空间。

如果你想要一个不均匀的网格效果，那么你需要使用一个javascript解决方案来设置绝对位置。我推荐masonry plugin，我认为主页上的前/后示例显示了您遇到的问题以及您想要的解决方案。

Answer 2

您似乎正在寻找一种方法来填充页面上的所有方块。这不可能简单地通过CSS实现。 '向左飘浮;'只是填充页面中的空间，逐个图像，而不是考虑它们如何组合在一起。

将所有部件装配在一起，使它们舒适地坐在一起，就像拼图一样不容易。这实际上是一个非常复杂的问题，它与背包问题（http://en.wikipedia.org/wiki/Knapsack_problem）和包装问题（http://en.wikipedia.org/wiki/Packing_problem）有关。

要解决这个问题，我确信可以使用jQuery或JavaScript（或者甚至是PHP）库。或者，您可以手动订购照片，使它们以整齐的方式组合在一起。

祝你好运！

Answer 3

这导致了差距：

article.post {
    margin: 0 0 30px 30px;
}