我目前有一堆水平排列的
不改变HTML是否可以垂直实现相同的效果?
要生成这张图片,我必须将每个列移到一个容器
inline-block
div
,当容器已满时,它们很好地溢出到下一行:
![enter image description here](https://istack.dev59.com/jXXcy.webp)
要生成这张图片,我必须将每个列移到一个容器
div
中。由于无法修改源HTML,因此这不是一种选择。
CSSDesk
CSS2
很遗憾,据我所知,使用纯CSS和HTML是不可能实现这个效果的。但我知道有一个jQuery插件Masonry可以很好地完成这个任务。
CSS3
使用CSS3的多列布局模式,您可以实现问题的布局(虽然它没有上述Masonry那么多的选项)。IE支持从10及以上版本,您可能需要一些浏览器前缀。非前缀版本看起来应该像这样(在容器上):
column-count: 3;
column-gap: 10px;
width: 480px;
根据浏览器的支持情况,您可以使用column-count
属性。