Cách thực hiện - Bố cục cột hỗn hợp
Tìm hiểu cách tạo lưới bố cục cột hỗn hợp bằng CSS.
Tìm hiểu cách tạo bố cục cột đáp ứng thay đổi giữa 4 cột, 2 cột và cột toàn chiều rộng tùy thuộc vào chiều rộng màn hình.
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi:
Cách tạo bố cục cột hỗn hợp
Bước 1) Thêm HTML:
Thí dụ
<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 tôi sẽ tạo một bố cục bốn cột sẽ chuyển đổi thành hai cột trên màn hình có chiều rộng nhỏ hơn 900px. Tuy nhiên, trên màn hình có chiều rộng dưới 600px, các cột sẽ xếp chồng lên nhau thay vì nổi cạnh nhau.
Thí dụ
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Mẹo: Đi tới Hướng dẫn bố cục trang web CSS của chúng tôi để tìm hiểu thêm về bố cục trang web.
Mẹo: Đi tới Hướng dẫn thiết kế web đáp ứng CSS của chúng tôi để tìm hiểu thêm về lưới và thiết kế web đáp ứng.