CSS 多列

CSS 多列布局

CSS 多列布局允许轻松定义多列文本 - 就像报纸一样：

每日 Ping

洛雷姆·伊普苏姆
多洛坐在阿梅特，conectetuer adipiscing elit，sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquamerat volutpat。 Ut wisi enim ad minim veniam, quis nostrud exercitation 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。

CSS 多列属性

在本章中，您将了解以下多列属性：

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

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
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-ruleproperty 是用于设置上面所有column-rule-* 属性的简写属性。

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

示例

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

亲自试一试 »

指定元素应跨越多少列

这个column-span属性指定元素应跨越多少列。

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

示例

h2 {
column-span: all;
}

亲自试一试 »

指定列宽

这个column-width属性指定建议的最佳列宽度。

以下示例指定建议的最佳列宽度应为 100px：

示例

div {
column-width: 100px;
}

亲自试一试 »

CSS 多列属性

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

Property	Description
column-count	Specifies the number of columns an element should be divided into
column-fill	Specifies how to fill columns
column-gap	Specifies the gap between the columns
column-rule	A shorthand property for setting all the column-rule-* properties
column-rule-color	Specifies the color of the rule between columns
column-rule-style	Specifies the style of the rule between columns
column-rule-width	Specifies the width of the rule between columns
column-span	Specifies how many columns an element should span across
column-width	Specifies a suggested, optimal width for the columns
columns	A shorthand property for setting column-width and column-count