Cách tạo: Bảng song song

Cách tạo bảng song song

Cách sử dụng CSS float Tạo bảng song song:

Mẫu

* {
  box-sizing: border-box;
}
/* Tạo bố cục hai cột */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (xóa trôi) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Thử trực tiếp

Cách sử dụng CSS flex Tạo bảng song song:

Mẫu

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

Thử trực tiếp

Lưu ý:Flexbox không được hỗ trợ trên Internet Explorer 10 và các phiên bản thấp hơn. Bạn có sử dụng float hoặc flex tùy thuộc vào bạn. Nhưng nếu bạn cần hỗ trợ IE10 và các phiên bản thấp hơn, bạn nên sử dụng float.

Lưu ý:Để biết thêm thông tin về mô-đun bố cục Flexible Box, hãy đọc hướng dẫn của chúng tôi Hướng dẫn CSS Flexbox.

Thêm khả năng tương ứng

Ví dụ trên sẽ không đẹp lắm trên thiết bị di động vì hai cột sẽ chiếm quá nhiều không gian trên trang.

Để tạo bảng tương ứng, chuyển từ bố cục hai cột sang bố cục toàn rộng trên thiết bị di động, hãy thêm các truy vấn truyền thông sau:

Mẫu

/* L布局 tương ứng - Trên màn hình có độ rộng nhỏ hơn 600 pixel, hai cột sẽ được sắp xếp chồng lên nhau thay vì song song */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Thử trực tiếp

Trang liên quan

Giáo trình:CSS Bảng

Giáo trình:CSS Chuyển động

Giáo trình:CSS Flexbox