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