CSS3 多列

---

CSS3 多列布局

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

Daily Ping

Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

---

CSS3 多列属性

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

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

---

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
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

---

---

CSS3 创建多列

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

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

实例

div {
  column-count: 3;
} 亲自试一试 »

---

CSS3 指定列之间的间隙

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

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

实例

div {
  column-gap: 40px;
} 亲自试一试 »

---

CSS3 列规则

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;
} 亲自试一试 »

---

CSS3 多列属性

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

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