CSS 多列布局

…… ……

CSS 多列属性

在本章中,您将学到以下多列属性:

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

浏览器支持

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

属性 Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

预览 (在新窗口中打开)

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

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

实例

div {
  column-width: 100px;
}

CSS 多列属性

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

属性 描述
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 的简写属性。

发表回复

您的电子邮箱地址不会被公开。