Cách thực hiện - Các bảng cạnh nhau
Tìm hiểu cách tạo các bảng cạnh nhau bằng CSS.
Cách đặt bàn cạnh nhau
Cách tạo các bảng cạnh nhau bằng thuộc tính CSS float
:
Ví dụ
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
Hãy tự mình thử » Cách tạo các bảng cạnh nhau bằng thuộc tính CSS flex
:
Ví dụ
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Hãy tự mình thử »Lưu ý: Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Tùy bạn muốn sử dụng float hay flex. 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 .
Thêm khả năng phản hồi
Ví dụ trên sẽ không đẹp mắt trên thiết bị di động vì hai cột sẽ chiếm quá nhiều không gian trên trang. Để tạo bảng phản hồi, bảng đó phải chuyển từ bố cục hai cột sang bố cục toàn chiều rộng trên thiết bị di động, hãy thêm các truy vấn phương tiện sau:
Ví dụ
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@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 về bảng CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho bảng.
Mẹo: Hãy truy cập Hướng dẫn CSS Float của chúng tôi để tìm hiểu thêm về thuộc tính float.
Mẹo: Hãy truy cập Hướng dẫn CSS Flexbox của chúng tôi để tìm hiểu thêm về thuộc tính flex.