CSS 多列布局
CSS 多列布局(CSS Multi-column Layout)是一种定义了多栏布局的模块,可支持在布局中建立列(column)的数量,以及内容如何在列之间流动(flow)、列之间的间距(gap)大小,以及列的分隔线(column rules)。
基本示例
在下列示例中,column-count
属性应用于带有 container
类的 <div>
元素。因为 column-count
的值为 3
,所以内容排成等宽的 3 列。
与分片的关系
多列布局与分页媒体 (en-US)密切相关,因为每一个列框都成为一个片段,就像一个打印的页面成为整个文档的片段一样。因此,现在 CSS 分片规范中定义的属性需要控制内容如何在列之间断开。
参考
多列布局属性
有关的 CSS 碎片化属性
指南
规范
Specification |
---|
CSS Multi-column Layout Module Level 1 |
参见
其他 CSS 布局方法包括:
- CSS 弹性盒子布局(CSS flexbox)
- CSS 网格布局