คอร์ส IT พื้นฐาน CSS 030_เลย์เอาต์หลายคอลัมน์ Columns

เลย์เอาต์หลายคอลัมน์ Columns

Columns(คอลัมน์) เป็นคุณสมบัติที่ใช้ในการสร้างหลายคอลัมน์ในเลย์เอาต์ข้อความ โดยการตั้งค่าจำนวนคอลัมน์และความกว้างของคอลัมน์ของคอนเทนเนอร์ เนื้อหาข้อความจะไหลโดยอัตโนมัติระหว่างคอลัมน์ Columns(คอลัมน์) ไม่สามารถใช้ได้กับเนื้อหาทุกประเภท หลักใช้สำหรับการจัดการเลย์เอาต์หลายคอลัมน์ของเนื้อหาข้อความ ไม่ใช่สำหรับเลย์เอาต์ของหน้าทั้งหมด

• column-count： ระบุจำนวนคอลัมน์
• column-width： ระบุความกว้างของแต่ละคอลัมน์
• column-gap： ระบุช่องว่างระหว่างคอลัมน์
• column-rule： ตั้งค่าบรรทัดกฎ (บรรทัดแบ่ง) ระหว่างคอลัมน์

ตัวอย่าง:

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>นี่คือย่อหน้า 111, นี่คือย่อหน้า 111, นี่คือย่อหน้า 111</p>
3
        <p>นี่คือย่อหน้า 222, นี่คือย่อหน้า 222, นี่คือย่อหน้า 222</p>
4
        <p>นี่คือย่อหน้า 333, นี่คือย่อหน้า 333, นี่คือย่อหน้า 333</p>
5
    </div>

ผลลัพธ์: