CSS 多列布局

CSS 多列布局扩展了块元素布局模式，以便更容易地定义多列文本。如果一行太长，人们阅读文本很麻烦; 如果眼睛从一行的终点移动到下一个行的开始需要太长时间，它们就会丢失它们所在的行。因此，为了最大限度地利用大屏幕，作者应将宽度不等的文本列并排放置，就像报纸一样。

CSS 多列布局涉及的属性：

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

CSS 创建多列

使用 column-count 属性设置元素应拆分的列数。

将 <div> 元素中的文本分成 3 列：

div {
  column-count: 3;
}

CSS 设置列之间的间距

使用 column-gap 属性设置列之间的间距。

设置列之间的 40 像素间隔：

div {
  column-gap: 40px;
}

CSS 列分割线

column-rule-style 属性设置列之间分割线的样式：

div {
  column-rule-style: solid;
}

column-rule-width 属性设置列之间分割线的宽度：

div {
  column-rule-width: 1px;
}

column-rule-color 属性设置列之间分割线的颜色：

div {
  column-rule-color: lightblue;
}

column-rule 属性是用于设置上述所有 column-rule-* 属性的简写属性。

设置列之间规则的宽度、样式和颜色：

div {
  column-rule: 1px solid lightblue;
}

设置元素应跨越的列数

使用 column-span 属性设置元素应跨越的列数。比如标题行跨越所有列。

以下示例设置 <h2> 元素应跨越所有列：

h2 {
  column-span: all;
}

设置列宽

使用 column-width 属性为列设置了建议的最佳宽度。

以下示例设置建议的最佳列宽度应为 100 像素：

div {
  column-width: 100px;
}

!! 同时设置列数 column-count 和列宽 column-width ，浏览器可能会忽略列宽。

浏览器支持情况

下表列出了完全支持属性的第一个浏览器版本。

CSS 多列属性

下表列出了所有多列属性：