CSS 多列布局

**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 (en-US), 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 碎片化属性

指南

多列的基本概念

多列布局的概述

设置列的样式 (en-US)

如何使用列的分隔线,以及设置列间距。

Spanning and Balancing (en-US)

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 (en-US)

Introduction to the Fragmentation specification and how to control where column content breaks.

规范

Specification
CSS Multi-column Layout Module Level 2

参见

其它 CSS 布局方法包括: