หลักการสร้าง：คอลัมน์ที่สูงเท่ากัน

เรียนรู้ว่าจะสร้างคอลัมน์ที่สูงเท่ากันด้วย CSS

หลักการสร้างคอลัมน์ที่สูงเท่ากัน

เมื่อคอลัมน์ของคุณควรแสดงขึ้นเป็นแถวข้างต่อกัน คุณมักต้องการให้มันมีความสูงเหมือนกัน (ตรงกับความสูงสูงสุด)

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

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

<div class="col-container">
  <div class="col">
    <h2>คอลัมน์ 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>คอลัมน์ 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>คอลัมน์ 3</h2>
    <p>ข้อความอื่นๆ..</p>
    <p>ข้อความอื่นๆ..</p>
  </div>
</div>

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

.col-container {
  display: table; /* ทำให้องค์ประกอบตัวแทนเหมือนตาราง */
  width: 100%; /* ตั้งค่าเป็นความกว้างทั้งหมดเพื่อขยายทั้งหมดหน้าเว็บไซต์ */
}
.col {
  display: table-cell; /* ทำให้องค์ประกอบด้านในตัวแทนเหมือนเซลล์ตาราง */
}

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

เรสโปนซิฟสูงเท่ากัน

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

เพื่อทำได้นี้ โปรดเพิ่มคำสั่งมีเดียวกัน (media query) และกำหนดค่าพิกเซลหยุดตัด

ตัวอย่าง

/* ถ้าหน้าต่างบราวเซอร์เล็กกว่า 600px ให้คอลัมน์ติดกัน */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

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

ใช้ Flexbox สร้างต่อรอบที่สูงและกว้างเท่ากัน

คุณยังสามารถใช้ Flexbox ทำโครงสร้างต่อรอบที่สูงเท่ากันได้

ตัวอย่าง

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

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

แจ้งเตือน：อินเทอร์เน็ต อิเคิลเพอร์ 10 และรุ่นเก่ากว่าไม่สนับสนุน Flexbox。

相关页面

教程：CSS Flexbox