คุณสมบัติ column-count
คุณสมบัติ column-count กำหนดจำนวนคอลัมน์ ที่แนะนำ
ในข้อความหลายคอลัมน์
จำนวนจริงของคอลัมน์อาจแตกต่างจาก
ที่กำหนดไว้ ขึ้นอยู่กับความกว้างของคอลัมน์
และขนาดของช่องว่างระหว่างคอลัมน์
ไวยากรณ์
selector {
column-count: number | auto;
}
ค่า
| ค่า | คำอธิบาย |
|---|---|
| number | กำหนดจำนวนคอลัมน์ที่ระบุ หรือให้ คำแนะนำ กับเบราว์เซอร์ ให้ใช้จำนวนคอลัมน์นี้ เนื่องจากจำนวนจริงของคอลัมน์ อาจแตกต่างจากที่กำหนดไว้ ขึ้นอยู่กับความกว้างของคอลัมน์และ ขนาดของช่องว่างระหว่างคอลัมน์ |
auto |
เบราว์เซอร์จะเลือกจำนวนคอลัมน์ที่เหมาะสมที่สุดโดยอัตโนมัติ |
ค่าเริ่มต้น: auto
ตัวอย่าง
ในตัวอย่างนี้ข้อความจะถูกแบ่งออกเป็น 3
คอลัมน์ (แน่นอนว่าในเบราว์เซอร์ที่
รองรับคุณสมบัติหลายคอลัมน์ ส่วนในเบราว์เซอร์อื่นๆ
จะแสดงผลเป็นข้อความธรรมดาในคอลัมน์เดียว):
<div id="elem">
some long text
</div>
#elem {
column-count: 3;
text-align: justify;
}
:
ตัวอย่าง . ค่า auto
ในตัวอย่างนี้กำหนดความกว้างของคอลัมน์ column-width
เป็น 150px และจำนวนของคอลัมน์ column-count
ถูกตั้งค่าเป็น auto - เบราว์เซอร์จะ
เลือกจำนวนคอลัมน์ที่จำเป็นและ
ช่องว่างระหว่างคอลัมน์โดยอัตโนมัติ:
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
ดูเพิ่มเติม
-
คุณสมบัติ
column-width,
ซึ่งกำหนดความกว้างของคอลัมน์ -
คุณสมบัติ
column-gap,
ซึ่งกำหนดช่องว่างระหว่างคอลัมน์ -
คุณสมบัติ
column-rule,
ซึ่งกำหนดขอบระหว่างคอลัมน์ -
คุณสมบัติ
column-span,
ซึ่งกำหนดจำนวนคอลัมน์ที่องค์ประกอบควรขยายครอบคลุม -
คุณสมบัติ
columns,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับการจัดรูปแบบหลายคอลัมน์
