Làm thế nào để - 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ác 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:
Thí 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:
Thí 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 */
}
Chiều cao cân bằng đáp ứng
Các cột chúng tôi đã tạo trong ví dụ trước là đáp ứng (nếu bạn thay đổi kích thước cửa sổ trình duyệt trong ví dụ thử, bạn sẽ thấy rằng 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 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 ngắt cho thời điểm điều này xảy ra:
Thí 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%;
}
}
Chiều cao và chiều rộng bằng nhau bằng cách sử dụ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:
Thí dụ
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
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 .