CSS 多列布局

基本示例

在下列示例中，column-count 属性应用于带有 container 类的 <div> 元素。因为 column-count 的值为 3，所以内容排成等宽的 3 列。

与分片的关系

多列布局与分页媒体密切相关，因为每一个列框都成为一个片段，就像一个打印的页面成为整个文档的片段一样。因此，现在 CSS 分片规范中定义的属性需要控制内容如何在列之间断开。

参考

多列布局属性

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

有关的 CSS 碎片化属性

• break-after
• break-before
• break-inside
• orphans
• widows

指南

多列的基本概念

多列布局的概述

设置列的样式

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

跨列与平衡

如何使元素跨越所有的列并控制列的填充方式。

在多列中控制溢出

当一个项目溢出它所在的列时或有太多的列内容无法容纳一个容器时，会发生什么。

多列中断开内容

介绍碎片化规范以及如何控制列内容的断开位置。

规范

参见

其他 CSS 布局方法包括：

• CSS 弹性盒子布局（CSS flexbox）
• CSS 网格布局