CSS 垂直堆栈

Question

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

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

为了生成这张图片，我必须将每一列移动到容器 div 中。我无法修改源 HTML，因此这不是一个选项。

CSSDesk

Answer 1

CSS2
las，据我所知，这对于纯 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)。