CSS Multi-column

CSS 多列布局

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

三国演义

第一回
宴桃园豪杰三结义
斩黄巾英雄首立功
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。

...... ......

CSS Multi-column Attribute

Sa kabanatang ito, malalaman mo ang sumusunod na multi-column na attribute:

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

Suporta ng Browser

Ang numero sa talahanan ng browser ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa attribute na ito.

Attribute 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 na nagtatayo ng multi-column

column-count Ang attribute ay nagtutukoy ng bilang ng kolumna na dapat hatiin ng elemento.

Ang sumusunod na halimbawa ay naghati ang teksto sa loob ng <div> sa 3 kolumna:

Halimbawa

div {
  column-count: 3;
}

Subukan ang sarili

CSS na nagtutukoy ng puwang sa pagitan ng kolumna

column-gap Ang attribute ay nagtutukoy ng puwang sa pagitan ng kolumna.

Ang sumusunod na halimbawa ay nagtutukoy na ang puwang sa pagitan ng kolumna ay 40 pixel:

Halimbawa

div {
  column-gap: 40px;
}

Subukan ang sarili

CSS Column Rule

column-rule-style column-rule-style: solid;

Halimbawa

div {
  Ang attribute ay nagtutukoy ng estilo ng patakaran sa pagitan ng kolumna:
}

Subukan ang sarili

column-rule-width column-rule-width: 1px;

Halimbawa

div {
  Ang attribute ay nagtutukoy ng lapad ng patakaran sa pagitan ng kolumna:
}

Subukan ang sarili

column-rule-color column-rule-color: lightblue;

Halimbawa

div {
  Ang attribute ay nagtutukoy ng kulay ng patakaran sa pagitan ng kolumna:
}

Subukan ang sarili

Ang column-rule attribute ay isang maikling pangalan na ginagamit upang itakda ang lahat ng column-rule-* na attribute.

Ang sumusunod ay nagtatakda ng lapad, estilo at kulay ng patakaran sa pagitan ng kolumna:

Halimbawa

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

Subukan ang sarili

Tinutukoy kung ilang kolumna ang dapat lumampas ng elemento

column-span Ang attribute ay nagtutukoy kung ilang kolumna ang dapat lumampas ng elemento.

Ang sumusunod ay nagtutukoy na ang <h2> na elemento ay dapat lumampas sa lahat ng kolumna:

Halimbawa

h2 {
  column-span: all;
}

Subukan ang sarili

Tinutukoy ang lapad ng kolumna

column-width Ang attribute ay nagtutukoy ng rekomendadong pinakamahusay na lapad ng kolumna.

Ang sumusunod ay nagtutukoy na ang rekomendadong pinakamahusay na lapad ng kolumna ay 100px:

Halimbawa

div {
  column-width: 100px;
}

Subukan ang sarili

CSS Multi-column Attribute

Ang sumusunod na talahanan ay naglilista ng lahat ng multi-column na attribute:

Attribute Inilarawan
column-count Tinutukoy ang bilang ng kolumna na dapat hatiin ng elemento.
column-fill Tinutukoy kung paano ililigaw ang kolumna.
column-gap Tinutukoy ang puwang sa pagitan ng kolumna.
column-rule Ginagamit upang itakda ang maikling pangalan ng lahat ng column-rule-* na attribute.
column-rule-color Tinutukoy ang kulay ng patakaran sa pagitan ng kolumna.
column-rule-style Tinutukoy ang patakaran ng estilo sa pagitan ng kolumna.
column-rule-width Tinutukoy ang lapad ng patakaran sa pagitan ng kolumna.
column-span Specify how many columns an element should span.
column-width Specify the suggested best width for the column.
Columns Abbreviated attribute for setting column-width and column-count.