CSS 多列

CSS 多列布局

CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样。

在本章中，您将学到以下多列属性：

表格中的数字注明了完全支持该属性的首个浏览器版本。

column-count 属性规定元素应被划分的列数。

下面的例子将 <div> 元素中的文本分为 3 列：

div {
  column-count: 3;
}

column-gap 属性规定列之间的间隔。

下面的例子指定列之间的间距为 40 像素：

div {
  column-gap: 40px;
}

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 属性为列指定建议的最佳宽度。

下例规定了列的建议最佳宽度应为 100px：

div {
  column-width: 100px;
}

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

属性	描述
column-count	规定元素应划分的列数。
column-fill	规定如何填充列。
column-gap	指定列之间的间隙。
column-rule	用于设置所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间的规则样式。
column-rule-width	规定列之间的规则宽度。
column-span	规定一个元素应该跨越多少列。
column-width	为列指定建议的最佳宽度。
columns	用于设置 column-width 和 column-count 的简写属性。