CSS垂直堆栈

Question

我目前有一堆inline-block divs水平堆叠.当容器装满时,它们很好地溢出到下一行:

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

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

CSSDesk

Answer 1

CSS2
唉,据我所知,使用纯CSS和HTML是不可能的.我知道有一个jQuery插件砌体虽然做得很好.

CSS3
使用CSS3的多列布局模式,您可以实现问题的布局(尽管它没有上述砌体那么多的选项).我认为IE支持从10以上,你可能需要一些浏览器前缀.非前缀版本看起来像这样(在您的容器上):

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

上面的内容改编自这个博客文章,链接到这个演示(虽然也有其他).