สร้างหน้า "Meet The Team" ที่ Responsive ด้วย HTML และ CSS ใช้ Flexbox/Float layout และ Media Queries
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html { box-sizing: border-box; } body{ font-family: monospace,serif,sans-serif; } img{ height: 300px; width: 100%; } *, *:before, *:after { box-sizing: inherit; } .teamColumn { float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; } @media screen and (max-width: 650px) { .teamColumn { width: 100%; display: block; } } .teamCard { background-color: rgb(162, 162, 255); text-align: center; font-size: 20px; } .personContainer { padding: 0 16px; } .personContainer::after, .teamContainer::after { content: ""; clear: both; display: table; } .Designation { color: rgb(15, 0, 100); font-weight: bolder; font-size: 40px; } .contact { border: none; outline: 0; display: inline-block; padding: 12px; color: white; font-weight: bolder; background-color: rgb(78, 0, 102); text-align: center; cursor: pointer; width: 100%; } .contact:hover { background-color: #555; } </style> </head> <body> <h1 style="text-align: center;">Responsive Meet the team example </h1> <div class="teamContainer"> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" > <div class="personContainer"> <h2>Jane Doe</h2> <p class="Designation">CTO</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="personContainer"> <h2>Mike Ross</h2> <p class="Designation">Front End Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <div class="personContainer"> <h2>John Doe</h2> <p class="Designation">FullStack Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> </div> </body> </html>
คำอธิบาย
ใช้ float: left + width: 33.3% สร้าง 3 คอลัมน์บน Desktop ที่ ≤ 650px ใช้ Media Query เปลี่ยนเป็น width: 100% display: block Stack แนวตั้ง
โครงสร้าง HTML:
.teamContainer (clearfix)
.teamColumn (33.3% / 100%)
.teamCard
img (100% width, 300px height)
.personContainer
h2 (ชื่อ)
.Designation (ตำแหน่ง)
button.contact (Contact)
จุดสังเกตและการปรับปรุง:
- Clearfix: ใช้
::after { clear: both; }บน container เพราะใช้ float - Box-sizing:
border-boxทั่วไป ดีมาก - Images: ความสูงคงที่ 300px อาจบีบตัวภาพ ใช้
object-fit: coverดีกว่า - Font stack:
monospace, serif, sans-serifผสมกัน מוזר ควรเลือกอย่างใดอย่างหนึ่ง
เวอร์ชันสมัยใหม่ (Flexbox/Grid):
Flexbox Version:
.teamContainer {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.teamColumn {
flex: 1 1 300px; /* grow, shrink, basis */
min-width: 280px;
}
@media (max-width: 650px) {
.teamColumn { flex-basis: 100%; }
}
Grid Version (แนะนำ):
.teamContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
/* ไม่ต้อง media query! auto-fit + minmax จัดการ responsive เอง */
Accessibility เพิ่มเติม:
<img alt="Jane Doe, CTO">(alt text มีความหมาย)- Button:
<button type="button">Contact</button> - Semantic HTML:
<section>,<article>สำหรับแต่ละคน
