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:
Thí 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 tôi sẽ tạo hai cột bằng nhau :
Ví dụ về Float
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
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 trước đó.
Ví dụ Flex
.row {
display: flex;
}
.column {
flex: 50%;
}
Tùy thuộc vào bạn nếu 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, bạn 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 tôi sẽ tạo hai cột không bằng nhau :
Thí dụ
.column {
float: left;
}
.left {
width: 25%;
}
.right {
width: 75%;
}
Trong ví dụ này, chúng tôi sẽ tạo một bố cục hai cột đáp ứng:
Thí 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%;
}
}
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.