最新的Web开发教程
 

CSS多列

❮上一页 下一页章❯

CSS3多栏布局

CSS3的多栏布局允许文本的多个列的简单的定义 - 就像在报纸上：

每日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.

浏览器支持

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

其次是数字-webkit-或-moz-指定用一个前缀工作的第一个版本。

属性
column-count 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1
column-gap 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1
column-rule 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1
column-rule-color 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1
column-rule-style 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1
column-rule-width 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1
column-width 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1

CSS3多列属性

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

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

CSS3创建多列

所述column-count属性指定列的元素应分为数。

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

例

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
试一试»

CSS3指定列之间的差距

所述column-gap属性指定列之间的间隙。

下面的示例指定列之间40个像素差距：

例

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
试一试»

CSS3列规则

该column-rule-style属性指定列之间的规则的风格：

例

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
试一试»

该column-rule-width属性指定列之间的规则的宽度：

例

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
试一试»

该column-rule-color属性指定列之间的规则的颜色：

例

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
试一试»

该column-rule属性是用于设置以上的所有列基于规则*属性的简写属性。

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

例

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
试一试»

指定多少列的元素应该跨度

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

下面的示例指定<h2>元素应该跨越所有列跨度：

例

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
试一试»

指定列宽

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

下面的示例指定的列建议，最佳宽度应该是100像素：

例

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}
试一试»

CSS3多列属性

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

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

❮上一页 下一页章❯