CSS - 使用浮動div自動填充空白空間

我有多個div（圖像）與浮法：左;財產和我想知道爲什麼有一些空的空間，爲什麼浮動divs沒有填補空白。

非常感謝您的時間和幫助。

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

2012-08-04 Gab

提供一些源代碼。 – Amberlamps 2012-08-04 23:10:54

你必須在gablabelle.com看到佈局才能理解。 – Gab 2012-08-04 23:16:07

在你的重複（淘氣！）問題中看到我的評論，也許這樣你就可以得到你想要的東西，儘管沒有石工或同位素。 – Systembolaget 2012-08-05 11:37:28

這只是如何浮動的作品。那些差距在那裏，因爲元素在另一個突破到新線路之後浮動。它不填寫上面的空白。

如果你想要一個不均勻的網格效果，那麼你需要使用JavaScript解決方案，你設置的絕對位置。我建議masonry plugin，我認爲主頁上的前後示例顯示了您遇到的問題以及您需要的解決方案。

2012-08-04 23:18:16

該死......好吧我會用jQuery同位素插件，但是我希望它能在沒有javascript的情況下很好地降級。 – Gab 2012-08-04 23:22:04

是的，我建議砌體，因爲它是免費的，但我現在也在使用同位素進行項目。不幸的是，目前沒有使用JS的解決方案。 – 2012-08-04 23:24:36

我仍然與同位素有差距。一探究竟。 – Gab 2012-08-04 23:25:39

這是造成差距：

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

2012-08-04 23:13:08 Amberlamps

沒有這些利潤率。我想要的是，我正在拍攝270x270的空白點。 – Gab 2012-08-04 23:15:07

@Gab：通過將每個浮動值設置爲左側，您無法獲得所需的值。以「Karin et les feuilles」並手動設置其浮動爲正確。下面的div將完全適合。 – Amberlamps 2012-08-04 23:21:25

看來你正在尋找一種方式來填充頁面上的所有廣場。這不可能簡單地通過CSS來實現。 '向左飄浮;'只是簡單地填充頁面中的空間，逐個圖像，而不是考慮它們如何融合在一起。

把所有的東西放在一起，讓它們坐在一起，像一個拼圖一樣不容易。這實際上是一個相當複雜的問題，它與揹包問題（http://en.wikipedia.org/wiki/Knapsack_problem）和包裝問題（http://en.wikipedia.org/wiki/Packing_problem）有關。

爲了解決這個問題，我確信會有jQuery或JavaScript（甚至PHP）庫可供使用。或者，您可以手動訂購照片，以便它們以整齊的方式整合在一起。

祝你好運！

2012-08-04 23:20:26

好吧我猜我只是使用jQuery同位素插件，但我希望它沒有任何JavaScript就會很好地降級。 – Gab 2012-08-04 23:22:27

Isotope插件的體面實現應該很好地處理這個問題。在旁註中，您正在設計的網站看起來非常棒！ – 2012-08-04 23:26:08

同位素現在開啓。但我仍然有差距！感謝這將是我的新組合。前一個是在visualise.ca。 ;-) – Gab 2012-08-04 23:29:31

回答