最新的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 速記屬性設置列寬和列數

❮上一頁 下一頁章❯