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

Question

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

我有多个div（图片），带有float：left; 属性，我想知道为什么会有一些空白，为什么浮动div不能填补空白。

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

更新：我现在使用jQuery同位素，但仍然存在差距...知道吗？

Answer 1

浮动就是这样。 这些间隙之所以存在，是因为元素在另一个换行符之后浮动。 它没有填充上面的空间。

如果您想要不均匀的网格效果，则需要在设置绝对位置的地方使用JavaScript解决方案。 我建议使用砖石插件 ，我认为主页上的之前/之后的示例显示了您遇到的问题以及所需的解决方案。

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;
}