Cách làm - Chiều cao bằng nhau
Tìm hiểu cách tạo các cột có chiều cao bằng nhau bằng CSS.
Cách tạo cột có chiều cao bằng nhau
Khi bạn có các cột xuất hiện cạnh nhau, bạn thường muốn chúng có chiều cao bằng nhau (khớp với chiều cao của cột cao nhất).
Vấn đề:
Mong muốn:
Bước 1) Thêm HTML:
Ví dụ
<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>
Bước 2) Thêm CSS:
Ví dụ
.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 */
}
Hãy tự mình thử » Đáp ứng chiều cao bằng nhau
Các cột chúng tôi đã tạo trong ví dụ trước có tính phản hồi cao (nếu bạn thay đổi kích thước cửa sổ trình duyệt trong ví dụ dùng thử, bạn sẽ thấy chúng tự động điều chỉnh theo chiều rộng và chiều cao cần thiết). Tuy nhiên, đối với màn hình nhỏ (như điện thoại thông minh), bạn có thể muốn chúng xếp chồng lên nhau theo chiều dọc thay vì chiều ngang:
Trên màn hình vừa và lớn:
Chào thế giới.
Chào thế giới.
Chào thế giới.
Chào thế giới.
Chào thế giới.
Trên màn hình nhỏ:
Chào thế giới.
Chào thế giới.
Chào thế giới.
Chào thế giới.
Chào thế giới.
Để đạt được điều này, hãy thêm truy vấn phương tiện và chỉ định giá trị pixel điểm dừng khi điều này xảy ra:
Ví dụ
/* 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%;
}
}
Hãy tự mình thử »Chiều cao và chiều rộng bằng nhau bằng Flexbox
Bạn cũng có thể sử dụng Flexbox để tạo các hộp có chiều cao bằng nhau:
Ví dụ
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Hãy tự mình thử »Lưu ý: Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn.
Mẹo: Đọc thêm về các hộp linh hoạt trong Hướng dẫn CSS Flexbox của chúng tôi.