CSS หลายคอลัมน์
CSS เค้าโครงหลายคอลัมน์
เลย์เอาต์แบบหลายคอลัมน์ CSS ช่วยให้กำหนดข้อความหลายคอลัมน์ได้ง่าย เช่นเดียวกับในหนังสือพิมพ์:
ปิงรายวัน
ความ
เจ็บปวดคือความรัก จึงเป็นเหตุให้เกิดขึ้นมาเพียงเล็กน้อยเท่านั้น ที่ผู้ปฏิบัติธรรมดาของเราแบกรับผลที่ตามมา ความเจ็บปวดของความเจ็บปวดในสำนักในโอลิมปิกหรือความเจ็บปวดในสำนักในโอลิมปิกเขาต้องการที่จะสร้างความรำคาญให้กับผลที่ตามมาหรือเขากำลังทุกข์ทรมานจากความเจ็บปวดของระบบภูมิคุ้มกันของสหภาพยุโรปที่ความจริง eros และผู้บริโภคและความเกลียดชังปกติของ zzril เวลาว่างที่เราเป็นอิสระจากวัยรุ่นไม่มีทางเลือก
คุณสมบัติหลายคอลัมน์ CSS
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติหลายคอลัมน์ต่อไปนี้:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS สร้างหลายคอลัมน์
คุณสมบัติcolumn-countระบุจำนวนคอลัมน์ที่ควรแบ่งออกเป็นองค์ประกอบ
ตัวอย่างต่อไปนี้จะแบ่งข้อความในองค์ประกอบ <div> ออกเป็น 3 คอลัมน์:
ตัวอย่าง
div
{
column-count: 3;
}
CSS ระบุช่องว่างระหว่างคอลัมน์
คุณสมบัติcolumn-gapระบุช่องว่างระหว่างคอลัมน์
ตัวอย่างต่อไปนี้ระบุช่องว่าง 40 พิกเซลระหว่างคอลัมน์:
ตัวอย่าง
div
{
column-gap: 40px;
}
กฎคอลัมน์ CSS
คุณสมบัติcolumn-rule-styleระบุรูปแบบของกฎระหว่างคอลัมน์:
ตัวอย่าง
div
{
column-rule-style: solid;
}
คุณสมบัติระบุ ความcolumn-rule-widthกว้างของกฎระหว่างคอลัมน์:
ตัวอย่าง
div
{
column-rule-width: 1px;
}
คุณสมบัติcolumn-rule-colorระบุสีของกฎระหว่างคอลัมน์:
ตัวอย่าง
div
{
column-rule-color: lightblue;
}
คุณสมบัติ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 หลายคอลัมน์
ตารางต่อไปนี้แสดงรายการคุณสมบัติหลายคอลัมน์ทั้งหมด:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |