CSS แบ่ง ซ้าย ขวา คอลัมน์เว็บไซต์

CSS แบ่ง ซ้าย ขวา คอลัมน์เว็บไซต์ บทความนี้สอนเขียนภาษา CSS สำหรับแบ่งการแสดงผลข้อมูลหน้าเว็บไซต์เป็นคอลัมน์ หรือแถว โดยแบ่งเป็น 2 คอลัมน์ คือ ซ้าย และขวาด้วยภาษา CSS สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS แบ่ง ซ้าย ขวา คอลัมน์เว็บไซต์

<style>
    .row {
        width: 100%;
    }
    .col {
        width: 50%;
        height: 200px;
        color: white;
    }
    .green {
        background-color: green;
    }
    .blue {
        background-color: blue;
    }
</style>

<div class="row">
    <div class="col green">A</div>
    <div class="col blue">B</div>
</div>

CSS แบ่ง ซ้าย ขวา คอลัมน์เว็บไซต์ จากตัวอย่างโค้ดสร้าง div class ชื่อ col ขนาดความกว้าง 50% ด้วยคำสั่ง width: 50% จำนวน 2 div ทำหน้าที่เป็นคอลัมน์แสดงผลข้อมูลทางด้านซ้าย (สีเขียว) และขวา (สีฟ้า) ของเว็บไซต์