「更好」漂浮在CSS

Question

我正在試驗CSS和float屬性。我有這樣的「網站」，用了很多的div對齊80px電網和float: left：

是否有CSS的方式，使它看起來像這樣 - 這樣的元素可以使用上面這些空白？

沒有JavaScript，如果可能的話。

謝謝，馬丁。

Answer 1

對於水平和垂直平鋪動態內容，CSS的選項是：

• float:left，正如你已經看到的，只提供有限的橫向平鋪。
• display:inline-block給出與float:left不同的結果，但沒有平鋪。
• CSS multi-column layout尚未完全定義。它支持垂直流入隱式列，但可能不是以平鋪的方式。
• flexible box layout還沒有得到很好的支持。它支持一種可能不符合平鋪的水平或垂直流，儘管它感覺像是朝着正確方向邁出的一步。

簡而言之，即使尚未完全定義的CSS標準似乎也不支持這一點;所以它可能還有很長的路要走。最簡單的回退選項是使用jQuery插件。

除了Masonry（如@Billy Moat建議），另一對jQuery插件是Isotope和Tiles Gallery。似乎最經常提到砌體。

Answer 2

不，這不能在CSS中完成。最好的方法是使用一個名爲masonry的JavaScript項目，我很害怕。

http://masonry.desandro.com/

Answer 3

讓說的px數量上去填補1塊的空間50px。 margin-top: -50px;

這並不神奇，對每個人來說這只是一些手工操作。如果你的內容是動態的，這可能無法運行，或者需要js來計算是否需要增加或減少多行和所有內容。

Answer 4

這可以完成，但正如CHE所說，如果您的內容是動態的，這將會以最糟糕的方式出錯。

但是，如果它是一個靜態網站，這當然可以完成。

要解決這個問題，請考慮塊&組並對齊它們，在每個塊內部重新對齊所有塊。