CSS垂直堆叠

Question

4

我目前有一堆水平排列的inline-block div，当容器已满时，它们很好地溢出到下一行： enter image description here

不改变HTML是否可以垂直实现相同的效果？

要生成这张图片，我必须将每个列移到一个容器div中。由于无法修改源HTML，因此这不是一种选择。 CSSDesk

- benesch

2个回答

2

根据浏览器的支持情况，您可以使用column-count属性。

- powerbuoy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeroen · Accepted Answer

CSS2
很遗憾，据我所知，使用纯CSS和HTML是不可能实现这个效果的。但我知道有一个jQuery插件Masonry可以很好地完成这个任务。

CSS3
使用CSS3的多列布局模式，您可以实现问题的布局（虽然它没有上述Masonry那么多的选项）。IE支持从10及以上版本，您可能需要一些浏览器前缀。非前缀版本看起来应该像这样（在容器上）：

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

以上内容是从这篇博客文章改编而来，该文章链接到这个演示（虽然还有其他的）。