วิธีการ - ความสูงเท่ากัน
เรียนรู้วิธีสร้างคอลัมน์ที่มีความสูงเท่ากันด้วย CSS
วิธีสร้างคอลัมน์ที่มีความสูงเท่ากัน
เมื่อคุณมีคอลัมน์ที่ควรปรากฏเคียงข้างกัน คุณมักจะต้องการให้คอลัมน์มีความสูงเท่ากัน (ตรงกับความสูงของคนที่สูงที่สุด)
ปัญหา:
ความปรารถนา:
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
ตอบสนองความสูงเท่ากัน
คอลัมน์ที่เราทำในตัวอย่างก่อนหน้านี้เป็นแบบตอบสนอง (หากคุณปรับขนาดหน้าต่างเบราว์เซอร์ในตัวอย่างลองใช้ คุณจะเห็นว่าคอลัมน์เหล่านั้นปรับตามความกว้างและความสูงที่จำเป็นโดยอัตโนมัติ) อย่างไรก็ตาม สำหรับหน้าจอขนาดเล็ก (เช่น สมาร์ทโฟน) คุณอาจต้องการให้วางซ้อนกันในแนวตั้งแทนที่จะเป็นแนวนอน:
บนหน้าจอขนาดกลางและขนาดใหญ่:
สวัสดีชาวโลก.
สวัสดีชาวโลก.
สวัสดีชาวโลก.
สวัสดีชาวโลก.
สวัสดีชาวโลก.
บนหน้าจอขนาดเล็ก:
สวัสดีชาวโลก.
สวัสดีชาวโลก.
สวัสดีชาวโลก.
สวัสดีชาวโลก.
สวัสดีชาวโลก.
เพื่อให้บรรลุสิ่งนี้ ให้เพิ่มคิวรีสื่อและระบุค่าพิกเซลเบรกพอยต์เมื่อสิ่งนี้ควรเกิดขึ้น:
ตัวอย่าง
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@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;
}
หมายเหตุ:ไม่รองรับ Flexbox ใน Internet Explorer 10 และเวอร์ชันก่อนหน้า
เคล็ดลับ:อ่านเพิ่มเติมเกี่ยวกับกล่องแบบยืดหยุ่นในCSS Flexbox Tutorialของเรา