Cách tạo: lưới hai cột

Cách tạo lưới hai cột

Bước 1 - Thêm HTML:

<div class="row">
  <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 hai cộtCùng độ rộngcủa các cột:

Mẫu float

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

Thử ngay

Cách tạo lưới hai cột hiện đại là sử dụng CSS Flexbox. Tuy nhiên, nó không hỗ trợ Internet Explorer 10 và các phiên bản sớm hơn.

Mẫu Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Thử ngay

Bạn có thể chọn sử dụng float hoặc flex để tạo lưới hai cột. Tuy nhiên, 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ề Flexible Box Layout Module, hãy đọc hướng dẫn của chúng ta Hướng dẫn CSS Flexbox。

Trong ví dụ này, chúng ta sẽ tạo hai cột không cùng độ rộng:

Mẫu

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Thử ngay

Trong ví dụ này, chúng ta sẽ tạo mộtPhản hồiLưới hai cột:

Mẫu

/* Lưới phản hồi - Khi độ rộng màn hình nhỏ hơn 600px, hai cột sẽ堆叠 lại với nhau thay vì song song */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Thử ngay

Trang liên quan

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

Hướng dẫn:Thiết kế trang web响应 CSS