CSS多列布局(CSS Multi-column Layout)是一种定义了多栏布局的模块,可支持在布局中建立列(column)的数量,以及内容如何在列之间流动(flow)、列之间的间距(gap)大小,以及列的分隔线(column rules)。
基本示例
在下列示例中,column-count
属性应用于带有容器类的元素。因为column-count
的值为3
,所以内容排成等宽的3列。
Relationship to Fragmentation
Multiple-column Layout is closely related to Paged Media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore the properties now defined in the CSS Fragmentation specification are required in order to control how content breaks between columns.
参考
多列布局属性
有关的CSS碎片化属性
指南
- 多列的基本概念
- 多列布局的概述
- 设置列的样式
- 如何使用列的分隔线,以及设置列间距。
- Spanning and Balancing
- How to make elements span across all columns and controlling the way columns are filled.
- Handling Overflow in Multicol
- What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.
- Content Breaks in Multicol
- Introduction to the Fragmentation specification and how to control where column content breaks.
规范
指定 | 状态 | 注释 |
---|---|---|
CSS Multi-column Layout Module | Working Draft | 初始定义 |