Cách tạo: layout cột lai

Học cách sử dụng CSS để tạo lưới layout cột lai.

Học cách tạo layout cột响应, layout này có thể thay đổi giữa bốn cột, hai cột và cột toàn diện dựa trên độ rộng màn hình.

Điều chỉnh kích thước cửa sổ trình duyệt để xem hiệu ứng响应:

thử trực tiếp

Cách tạo layout cột lai

Bước 1 - Thêm HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Bước 2 - Thêm CSS:

Trong ví dụ này, chúng ta sẽ tạo một layout bốn cột, layout này sẽ chuyển đổi thành hai cột khi độ rộng màn hình nhỏ hơn 900 pixel. Nhưng khi độ rộng màn hình nhỏ hơn 600 pixel, các cột sẽ chồng lên nhau thay vì nằm ngang.

/* Tạo bốn cột bằng nhau, làm chúng trôi nổi cùng nhau */
.column {
  float: left;
  width: 25%;
}
/* Xóa trôi nổi */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Thiết kế响应 - thay đổi layout thành hai cột thay vì bốn cột */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Thiết kế响应 - làm hai cột chồng lên nhau, thay vì nằm ngang */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

thử trực tiếp

Trang liên quan

Giáo trình:Lưới trang web CSS

Giáo trình:Thiết kế trang web tương tác CSS