CSS หลายคอลัมน์

CSS 多列布局

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

三国演义

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

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

CSS คุณสมบัติมากล้วน

在本章中，您将学到以下多列属性：

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

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

คุณสมบัติ ...... ...... คุณสมบัติที่คุณจะเรียนรู้ในบทนี้คือ： การสนับสนุนโปรแกรมนักเขียน ตัวเลขในตารางระบุสูตรบริการแรกที่สนับสนุนคุณสมบัตินี้。 Chrome
column-count Firefox Safari Opera 71.0 50.0
column-gap Firefox Safari Opera 71.0 50.0
column-rule Firefox Safari Opera 71.0 50.0
column-rule-color Firefox Safari Opera 71.0 50.0
column-rule-style Firefox Safari Opera 71.0 50.0
column-rule-width Firefox Safari Opera 71.0 50.0
column-span Firefox Safari IE 71.0 50.0
column-width Firefox Safari Opera 71.0 50.0

10.0

column-count 52.0

9.0

ตัวอย่าง

div {
  37.0
}

ลองทดลองด้วยตัวเอง

CSS สร้างคอลัมน์

column-gap คุณสมบัติกำหนดจำนวนคอลัมน์ที่ต้องการแบ่งออกขององค์ประกอบ。

ตัวอย่างด้านล่างแบ่งออกข้อความใน <div> ออกเป็น 3 คอลัมน์:

ตัวอย่าง

div {
  CSS กำหนดช่องว่างระหว่างคอลัมน์
}

ลองทดลองด้วยตัวเอง

คุณสมบัติกำหนดช่องว่างระหว่างคอลัมน์。

column-rule-style ตัวอย่างด้านล่างกำหนดช่องว่างระหว่างคอลัมน์เป็น 40 พิกเซล:

ตัวอย่าง

div {
  column-gap: 40px;
}

ลองทดลองด้วยตัวเอง

column-rule-width CSS กฎระหว่างคอลัมน์

ตัวอย่าง

div {
  คุณสมบัติกำหนดรูปแบบของกฎระหว่างคอลัมน์:
}

ลองทดลองด้วยตัวเอง

column-rule-color คุณสมบัติกำหนดความกว้างของกฎระหว่างคอลัมน์:

ตัวอย่าง

div {
  คุณสมบัติกำหนดสีของกฎระหว่างคอลัมน์:
}

ลองทดลองด้วยตัวเอง

คุณสมบัติ 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