Cách thực hiện - Các bảng cạnh nhau
Tìm hiểu cách tạo bảng cạnh nhau bằng CSS.
Cách đặt các bảng cạnh nhau
Cách tạo các bảng cạnh nhau bằng thuộc tính CSS float
:
Thí 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;
}
Cách tạo các bảng cạnh nhau bằng thuộc tính CSS flex
:
Thí dụ
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Lưu ý: Flexbox 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 bạn nếu 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, 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 .
Thêm phản hồi
Ví dụ trên sẽ không đẹp trên thiết bị di động, vì hai cột sẽ chiếm quá nhiều không gian của trang. Để tạo bảng đáp ứng, bảng đó sẽ 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:
Thí 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%;
}
}
Mẹo: Đi tới Hướng dẫn bảng CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu bảng.
Mẹo: Đi tới 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: Đi tới Hướng dẫn CSS Flexbox của chúng tôi để tìm hiểu thêm về thuộc tính flex.