Trang chủ
CSS
CSS nổi
Ví dụ
Thử: Các hộp nổi cạnh nhau
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .box { float: left; chiều rộng: 33,33%; phần đệm: 50px; } .clearfix::after { nội dung: ""; rõ ràng: cả hai; hiển thị: bảng; } </style> </head> <body> <h2>Lưới hộp</h2> <p>Các hộp nổi cạnh nhau:</p> <div class="clearfix"> <div class="box" style="background-color:#bbb"> <p>Một số văn bản bên trong hộp.</p> </div> <div class="box" style="background-color:#ccc"> <p>Một số văn bản bên trong hộp.</p> </div> <div class="box" style="background-color:#ddd"> <p>Một số văn bản bên trong hộp.</p> </div> </ div> <p><strong>Lưu ý:</strong> Ở đây, chúng tôi sử dụng bản hack Clearfix để xử lý luồng bố cục. Chúng ta cũng sử dụng thuộc tính kích thước hộp để đảm bảo hộp không bị vỡ do có thêm phần đệm. Hãy thử xóa đoạn mã này để xem hiệu quả.</p> </body> </html>