คุณสมบัติความกว้างคอลัมน์ CSS
ตัวอย่าง
ระบุว่าความกว้างของคอลัมน์ควรเป็น 100px:
div
{
column-width: 100px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติระบุ ความcolumn-width
กว้างของคอลัมน์
จำนวนคอลัมน์จะเป็นจำนวนคอลัมน์ขั้นต่ำที่จำเป็นในการแสดงเนื้อหาทั้งหมดในองค์ประกอบ
column-width
เป็นคุณสมบัติที่ยืดหยุ่น คิดว่า
column-width
เป็นคำแนะนำความกว้างขั้นต่ำสำหรับเบราว์เซอร์ เมื่อเบราว์เซอร์ไม่สามารถใส่อย่างน้อยสองคอลัมน์ตามความกว้างที่คุณระบุ คอลัมน์จะหยุดและวางลงในคอลัมน์เดียว
ค่าเริ่มต้น: | รถยนต์ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.columnWidth="100px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit- หรือ -moz- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
ไวยากรณ์ CSS
column-width: auto|length|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
แบ่งข้อความใน <div> องค์ประกอบออกเป็นสามคอลัมน์:
div
{
column-count: 3;
}
ตัวอย่าง
ระบุช่องว่าง 40 พิกเซลระหว่างคอลัมน์:
div
{
column-gap: 40px;
}
ตัวอย่าง
ระบุความกว้าง ลักษณะ และสีของกฎระหว่างคอลัมน์:
div
{
column-rule: 4px double #ff00ff;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS หลายคอลัมน์
การอ้างอิง HTML DOM: คุณสมบัติ columnWidth