Dưới đây là 3 cách dùng CSS đặt element div HTML cạnh nhau.
(Nhấn để nhảy đến từng phần)
- Phương pháp Float
- Phương pháp Flexbox
- Phương pháp CSS Grid
Phương pháp Float
Với float, dùng HTML markup sau:
<div class="float-container"> <div class="float-child"> <div class="green">Float Column 1</div> </div> <div class="float-child"> <div class="blue">Float Column 2</div> </div> </div>.float-container là element cha chứa hai .float-child.
Để div cạnh nhau, dùng CSS sau:
.float-container { border: 3px solid #fff; padding: 20px; } .float-child { width: 50%; float: left; padding: 20px; border: 2px solid red; } Kết quả:
Thêm border và padding để dễ thấy cấu trúc. Border trắng dày bên ngoài là .float-container với padding 20px.
Mỗi .float-child có border đỏ mỏng và padding. Các khối màu thực tế là child của .float-child (sẽ giải thích sau).
Đặt div cạnh nhau bằng float: left cho mỗi .float-child.
Vì cả hai float left, chúng hiển thị cạnh nhau nếu đủ chỗ. Chúng fit vì hai .float-child mỗi cái 50% width.
Khoảng cách giữa div do padding trong mỗi .float-child, chứa khối màu bên trong.
Tạo khoảng cách giữa cột bằng cách lồng mỗi cột trong div ngoài
Cần khối màu có div ngoài (.float-child) để thêm khoảng cách và vẫn fit cạnh nhau.
Giả sử chỉ có .float-child không padding, thay vào đó thêm margin-right cho khối đầu:
HTML:
<div class="float-container"> <div class="float-child green"> Float Column 1 </div> <div class="float-child blue"> Float Column 2 </div> </div> CSS:
.float-child.green { margin-right: 20px; }Lúc này cả hai .float-child chiếm 50% tổng width. Nhưng khối xanh đầu có margin 20px.
Tổng width = 50% + 20px + 50% = 20px vượt quá 100%, không đủ chỗ cho cả hai cạnh nhau.
Khối xanh thứ hai wrap xuống hàng dưới, float left ở đó:
Bạn có thể thử giảm width thành 48% hoặc số khác < 50% để fit. Nhưng không chính xác.
Vì vậy tôi thích bọc khối trong div ngoài width 50%, dùng padding tạo khoảng cách.
Ngày nay, dùng các phương pháp CSS mới hơn dễ dàng hơn float.
Xem phương pháp flexbox!
Phương pháp Flexbox
Với flexbox, căn chỉnh hai div trực quan hơn.
HTML:
<div class="flex-container"> <div class="flex-child magenta"> Flex Column 1 </div> <div class="flex-child green"> Flex Column 2 </div> </div> CSS:
.flex-container { display: flex; } .flex-child { flex: 1; border: 2px solid yellow; } .flex-child:first-child { margin-right: 20px; } Flexbox: set display: flex cho parent .flex-container. Bật flexbox.
Mỗi .flex-child set flex: 1. Con số này như tỷ lệ so sánh width các child trong flex parent.
Vì bằng nhau, không gian khả dụng chia đều. Hai child nên mỗi cái 50%.
Kết quả:
Thêm khoảng cách giữa div bằng margin, vẫn fit!
Lưu ý: thêm khoảng cách bằng margin-right: 20px chỉ cho .flex-child đầu. Flexbox đủ thông minh để tính thêm 20px đó khi chia width còn lại.
Nghĩa là bạn thêm khoảng cách bằng margin không cần tính pixel chính xác. Flexbox tự fit nội dung!
Đây là lý do lớn tôi thích flexbox.
Tuy nhiên, nếu nhiều element cần layout responsive grid, không biết đâu cần thêm khoảng cách.
Trường hợp này, muốn xếp chồng hai div mobile, phải bỏ margin-right cho mobile width.
Hoặc thêm element ngoài + padding cho mỗi .flex-child, giống float.
Không 100% trực quan, nhưng vẫn chạy. Cần layout phức tạp responsive với flexbox, nhớ điều này.
Xem phương pháp mới nhất: CSS grid.
Phương pháp CSS Grid
Cách đặt hai div cạnh nhau bằng CSS grid:
HTML:
<div class="grid-container"> <div class="grid-child purple"> Grid Column 1 </div> <div class="grid-child green"> Grid Column 2 </div> </div>CSS:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }Kết quả:
Thay đổi lớn với grid: trước tiên xác định grid template trông như nào. Nghĩa là muốn bao nhiêu cột/hàng trong layout.
Trường hợp này muốn 2 cột bằng nhau. Trong parent .grid-container, bật grid display: grid. Thêm số cột bằng property grid-template-columns.
Muốn 2 cột bằng nhau, set 1fr 1fr. Cho trình duyệt tạo layout 2 cột, mỗi cột 1fr (fr = fractional unit).
Đơn vị fr là tỷ lệ cột so với cột khác, giống flex: 1 flexbox. 1fr 1fr nghĩa là mỗi cột chiếm không gian như nhau.
Thêm khoảng cách giữa grid item bằng grid-gap
Lợi ích lớn grid: không cần padding/margin tạo khoảng cách giữa grid item.
Dùng grid-gap (hoặc gap trình duyệt mới) tự động thêm khoảng cách trong grid template.
Set grid-gap: 20px, trình duyệt biết thêm 20px khoảng cách giữa mọi item, dù cạnh nhau hay chồng.
Có thể nhận thấy mọi CSS property cho grid đều set trên parent .grid-container. Không cần viết CSS cho child .grid-child!