Trang chủ
CSS
CSS nổi
Ví dụ
Thử: Làm nổi các hình ảnh 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; } .img-container { float: left; chiều rộng: 33,33%; phần đệm: 5px; } .clearfix::after { nội dung: ""; rõ ràng: cả hai; hiển thị: bảng; } </style> </head> <body> <h2>Hình ảnh cạnh nhau</h2> <p>Nổi hình ảnh cạnh nhau:</p> <div class="clearfix"> <div class="img -container"> <img src="img_5terre.jpg" alt="Italy" style="width:100%"> </div> <div class="img-container"> <img src="img_forest.jpg" alt="Forest" style="width:100%"> </div> <div class="img-container"> <img src="img_mountains.jpg" alt="Mountains" style="width:100%" > </div> </div> <p>Lưu ý rằng chúng tôi cũng sử dụng tính năng Clearfix hack để xử lý luồng bố cục và chúng tôi thêm thuộc tính box-sizing để đảm bảo rằng vùng chứa hình ảnh không bị hỏng do đệm thêm. Hãy thử xóa đoạn mã này để xem hiệu quả.</p> </body> </html>