Cách tạo: Bố cục ba cột

Cách tạo bố cục ba cột

Bước 1 - Thêm HTML:

<div class="row">
  <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 bađều rộngcột:

Mô hình

.column {
  float: left;
  width: 33.33%;
}
/* Xóa trôi cột sau */
.row:after {
  content: "";
  display: table;
  clear: both;
}

thử trực tiếp

Trong ví dụ này, chúng ta sẽ tạo bakhông đều rộngcột:

Mô hình

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

thử trực tiếp

Trong ví dụ này, chúng ta sẽ tạo mộtPhản hồiBố cục ba cột:

Mô hình

/* Lưu lại bố cục tương ứng - Khi độ rộng màn hình nhỏ hơn 600px, để ba cột đ堆叠 thay vì đặt song song */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

thử trực tiếp

Trang liên quan

Hướng dẫn:Lưới trang web CSS

Hướng dẫn:Thiết kế trang web tương ứng CSS