คุณสมบัติเติมคอลัมน์ CSS
ตัวอย่าง
ระบุวิธีการเติมคอลัมน์:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติcolumn-fill
ระบุวิธีการเติมคอลัมน์ สมดุลหรือไม่
เคล็ดลับ:หากคุณเพิ่มความสูงให้กับองค์ประกอบแบบหลายคอลัมน์ คุณจะควบคุมวิธีที่เนื้อหาเติมคอลัมน์ได้ เนื้อหาสามารถสมดุลหรือเติมตามลำดับ
ค่าเริ่มต้น: | สมดุล |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.columnFill="auto" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Numbers ตามด้วย -moz- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
ไวยากรณ์ CSS
column-fill: balance|auto|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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: columnFill property