Làm thế nào để tạo: các cột cùng chiều cao

Học cách sử dụng CSS để tạo các cột cùng chiều cao.

Làm thế nào để tạo các cột cùng chiều cao

Khi các cột của bạn nên hiển thị song song, bạn thường muốn chúng có cùng chiều cao (khớp với chiều cao cao nhất).

Thử trực tiếp.

Bước 1 - Thêm 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>

Bước 2 - Thêm CSS:

.col-container {
  display: table; /* Làm cho yếu tố khung như một bảng */
  width: 100%; /* Đặt thành toàn rộng để mở rộng toàn bộ trang */
}
.col {
  display: table-cell; /* Làm cho các yếu tố trong khung như các tế bào bảng */
}

Thử trực tiếp.

Cùng chiều cao phản hồi

Các cột mà chúng ta đã tạo trong ví dụ trước là phản hồi (nếu bạn điều chỉnh kích thước cửa sổ trình duyệt trong ví dụ thử, bạn sẽ thấy chúng tự động điều chỉnh đến độ rộng và độ 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 đứng dọc而不是 nằm ngang:

Để thực hiện điều này, hãy thêm một truy vấn phương tiện và chỉ định một giá trị pixel điểm dừng:

Mẫu

/* Nếu kích thước cửa sổ trình duyệt nhỏ hơn 600px, thì để các cột đ堆叠 */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Thử trực tiếp.

Thực hiện cùng chiều cao và cùng chiều rộng bằng Flexbox

Bạn cũng có thể sử dụng Flexbox để tạo các khung cùng chiều cao:

Mẫu

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

Thử trực tiếp.

Lưu ý:Trình duyệt Internet Explorer 10 và các phiên bản trước không hỗ trợ Flexbox.

Trang liên quan

Hướng dẫn:CSS Flexbox