วิธีที่สร้าง: การจัดละแวกสองคอลัมน์

วิธีที่สร้างการจัดละแวกสองคอลัมน์

ขั้นที่ 1 - เพิ่ม HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

ขั้นที่ 2 - เพิ่ม CSS:

ในตัวอย่างนี้ เราจะสร้างสองคอลัมน์ความกว้างเท่าๆกันคอลัมน์:

ตัวอย่าง float

.column {
  float: left;
  width: 50%;
}
/* ล้าง float หลังจากคอลัมน์ */
.row:after {
  content: "";
  display: table;
  clear: both;
}

ทดลองด้วยตัวเอง

วิธีที่สร้างสองคอลัมน์ในรูปแบบที่สมัยใหม่คือใช้ CSS Flexbox แต่มันไม่สนับสนุน Internet Explorer 10 และตัวรุ่นต่ำกว่า

ตัวอย่าง Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

ทดลองด้วยตัวเอง

คุณสามารถเลือกใช้ float หรือ flex ในการสร้างการจัดละแวกสองคอลัมน์ แต่ถ้าคุณต้องการสนับสนุน IE10 และตัวรุ่นต่ำกว่า คุณควรใช้ float。

คำเตือน:ถ้าคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับ Flexible Box Layout Module โปรดอ่าน ตัวอย่าง CSS Flexbox。

ในตัวอย่างนี้ เราจะสร้างสองคอลัมน์ที่มีความกว้างต่างกัน:

ตัวอย่าง

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

ทดลองด้วยตัวเอง

ในตัวอย่างนี้ เราจะสร้างตอบสนองการจัดละแวกสองคอลัมน์:

ตัวอย่าง

/* แบบจัดละแวกตอบสนอง - เมื่อความกว้างของหน้าจอต่ำกว่า 600px ให้สองคอลัมน์หลุดรอบกัน แทนที่จะจัดวางข้างข้าง */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ทดลองด้วยตัวเอง

หน้าที่เกี่ยวข้อง

ตัวอย่าง:CSS 网站布局

ตัวอย่าง:CSS ตอบสนองแบบเว็บไซต์