จัดรูปภาพให้เรียงติดกันแนวนอน (Side by Side) ใช้ Float Layout แบบคลาสสิก พร้อม Responsive Column
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .imageColumn { float: left; width: 25%; padding: 10px; } h1{ text-align: center; } </style> </head> <body> <h1>Images Aligned Side by Side example</h1> <div class="alignRow"> <div class="imageColumn"> <img src="https://i.picsum.photos/id/811/400/400.jpg" alt="Snow" style="width:100%"> </div> <div class="imageColumn"> <img src="https://i.picsum.photos/id/871/400/400.jpg" alt="Forest"> </div> <div class="imageColumn"> <img src="https://i.picsum.photos/id/471/400/400.jpg" alt="Mountains"> </div> <div class="imageColumn"> <img src="https://i.picsum.photos/id/271/400/400.jpg" alt="Snow"> </div> </div>> </body> </html>
โครงสร้าง
- .imageColumn { float: left; width: 25%; padding: 10px; } - 4 คอลัมน์ (100%/25%=4)
- img { width: 100%; } - รูปเต็มความกว้างคอลัมน์
- box-sizing: border-box - Padding รวมใน Width ไม่ล้น
- Container
.alignRowต้อง Clearfix (ตัวอย่างขาด: ต้องมีoverflow: hiddenหรือ::after clearfix)
วิธีทันสมัย: Flexbox / Grid
/* Flexbox */
.alignRow { display: flex; flex-wrap: wrap; gap: 20px; }
.imageColumn { flex: 1 1 calc(25% - 20px); }
/* CSS Grid */
.alignRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 800px) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { grid-template-columns: 1fr; }
ผลลัพธ์
รูป 4 รูปเรียงแนวนอน: หิมะ, ป่า, ภูเขา, หิมะ (อีกรูป) แต่ละรูปมี Padding 10px
