CSS ความหลากหลายcolumns

คำนำออกและวิธีใช้

columns 属性เป็นค่าย่อที่ใช้เพื่อตั้งค่าความกว้างและจำนวนคอลัมน์

ดูเพิ่มเติมที่:

ตัวอย่าง CSS3:CSS3 หลายคอลัมน์

คู่มือการใช้งาน HTML DOM:columns 属性

ตัวอย่าง

กำหนดความกว้างและจำนวนคอลัมน์

div
{
columns:100px 3;
}

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

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

CSS ภาษา

columns: column-width column-count;

ค่าทางด้านรายละเอียด

ค่า รายละเอียด
column-width ความกว้างของคอลัมน์
column-count จำนวนคอลัมน์

รายละเอียดเทคนิค

ค่าเริ่มต้น: auto auto
การสืบทอด: no
รุ่น: CSS3
JavaScript ภาษา: object.style.columns="100px 3"

ตัวอย่างเพิ่มเติม

Column-count
แบ่งข้อความของ div ออกเป็นสามคอลัมน์
Column-gap
แบ่งข้อความของ div ออกเป็นสามคอลัมน์ และช่องว่างระหว่างคอลัมน์ 30 พิกเซล
Column-rule
กำหนดความกว้าง รูปแบบและสีของช่องตาราง

การสนับสนุนโปรแกรมนำทาง

ตัวเลขในตารางแสดงว่าเวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้

ตัวเลขที่มี -webkit- หรือ -moz- แสดงว่าใช้เบอร์โฟร์ตัวอักษรของเปรียบย่อ

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
9.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1