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 có chiều rộng đầy đủ 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:
Ví 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 bố cục bốn cột sẽ chuyển đổi thành hai cột trên màn hình rộng dưới 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.
Ví 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%;
}
}
Hãy tự mình thử »Mẹo: Hãy truy cập 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: Hãy truy cập 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.