ตอนแรกเราแสดงรูปเป็นแบบนี้
- Selection_999(1758).png (99.06 KiB) Viewed 975 times
โค้ด: เลือกทั้งหมด
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.test_beew{
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<p>การใช้ space-between</p>
<div class="test_beew">
<img src="1.jpg" alt="" width="30%">
<img src="2.jpg" alt="" width="30%">
<img src="3.jpg" alt="" width="30%">
</div>
</body>
</html>
- Selection_999(1759).png (97.66 KiB) Viewed 975 times
เป็นอย่างไรสำหรับคำสั่ง justify-content: space-between ที่จะทำให้รูปภาพในแถวนั้นมีระยะห่างเท่า ๆ กันไม่ใช่แค่รูปแต่แท็ก img อย่างเดียวแต่แท็กอื่น ๆ ก็สามารถทำให้มีระยะห่างเท่า ๆ กันได้ก็หวังว่าบทความนี้จะเป็นประโยชน์ให้กัทุกท่านที่เข้ามาอ่านกันนะ ครับ
ศึกษาเพิ่มเติม
บทเรียน HTML5
บทเรียน css
บทความแชร์ความรู้ CSS และ HTML
ท่านใดที่มีข้อสงสัยหรือติดปัญหาเกี่ยวกับ CSS และ HTML สามารถเขียนกระทู้ตั้งคำถามไว้ได้ที่
ถามตอบ HTML CSS