Cách tạo: bố cục bốn cột
- Trang trước Lưới ba cột
- Trang tiếp theo Lưới mở rộng
Học cách sử dụng CSS để tạo lưới bố cục bốn cột.
Cách tạo bố cục bốn cột
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 bố cục bốn cột:
mô hình
.column {
float: left;
width: 25%;
}
/* Xóa nổi sau cột */
.row:after {
content: "";
display: table;
clear: both;
}
Trong ví dụ này, chúng ta sẽ tạo một响应Bố cục bốn cột:
mô hình
/* Lưới响应 - Khi độ rộng màn hình nhỏ hơn 600px, làm ba cột dính vào nhau thay vì đặt song song */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
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
- Trang trước Lưới ba cột
- Trang tiếp theo Lưới mở rộng
