CSS垂直堆栈

Question

我目前有一堆inline-block div水平叠加。当容器装满时，它们很好地溢出到下一行：

是否可以在不更改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。