Cách thực hiện - Bố cục hai cột
Tìm hiểu cách tạo lưới bố cục 2 cột bằng CSS.
Cột 1
Một số tiếp theo..
Cột 2
Một số tiếp theo..
Cách tạo bố cục hai cột
Bước 1) Thêm HTML:
Ví dụ
<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ột bằng nhau :
Ví dụ nổi
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
Hãy tự mình thử »Một cách hiện đại để tạo hai cột là sử dụng CSS Flexbox . Tuy nhiên, nó không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn.
Tùy thuộc vào việc bạn muốn sử dụng float hay flex để tạo bố cục hai cột. Tuy nhiên, nếu bạn cần hỗ trợ cho IE10 trở xuống thì nên sử dụng float.
Mẹo: Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi .
Trong ví dụ này, chúng ta sẽ tạo hai cột không bằng nhau :
Trong ví dụ này, chúng tôi sẽ tạo bố cục hai cột đáp ứng :
Ví dụ
/* Responsive layout - when the screen is less than 600px wide, make 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.