CSS垂直堆棧

Question

我目前有一堆水平堆疊的inline-blockdiv。當容器已滿時，它們很好地溢出到下一行：

是否可以在不更改HTML的情況下垂直執行相同的操作？

要生成此圖片，我必須將每列移動到一個容器div。我無法修改源HTML，所以這不是一個選項。

CSSDesk

Answer 1

CSS2
唉，據我所知，這是不可能的純CSS和HTML。我知道有一個jQuery插件Masonry，雖然這很好。

CSS3
使用CSS3's Multi-column Layout Mode就可以達到這個問題的佈局（儘管它會不會有很多的選項，上述磚石）。 IE支持從10歲起，我認爲，你可能需要一些瀏覽器前綴。非前綴的版本會是這個樣子（你的容器上）：

column-count: 3; 
column-gap: 10px; 
width: 480px; 

以上改編自this blogpost鏈接到this demo（雖然有are others太）。

Answer 2

根據瀏覽器支持，您可以使用column-count。