CSS 多列

CSS 多列布局

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 的簡寫屬性。