การสร้างอัลบั้มรูปภาพหรือการจัดหมวดหมู่ให้กับรูปภาพ ทำให้รูปภาพเป็นระเบียบมากขึ้น ซึ่งเราสามารถกำหนด ขนาดของรูปภาพตามที่เราต้องการได้ รวมถึงกำหนดระยะห่างของรูปภาพแต่ละภาพ เพื่อให้รูปภาพจัดเรียงกัน ตามที่เราต้องการ
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
.image { //สร้าง Class
float: left; //คำสั่งให้ชิดซ้าย
width: 110px; //ความกว้างของรูปภาพ
height: 90px; //ความสูงของรูปภาพ
margin: 5px; //ระยะห่างของรูปภาพ
}
.text_line { //สร้าง Class
clear: both; //ไม่ให้มีอะไรลอยอยู่ทั้งด้านซ้ายและด้านขวา
margin-bottom: 2px; //ระยะห่างจากวัตถุ หรือข้อความด้านบน
}
</style>
</head>
<body>
<h3>Flower Gallery</h3>
<img class="thumbnail" src="dow.jpg" width="107" height="90">
<img class="thumbnail" src="rose.jpg" width="107" height="80">
<img class="thumbnail" src="mali.jpg" width="116" height="90">
<h3 class="text_line">Fruit Gallery</h3>
<img class="thumbnail" src="orange.jpg" width="107" height="90">
<img class="thumbnail" src="banana.jpg" width="107" height="80">
<img class="thumbnail" src="apple.jpg" width="116" height="90">
</body>
</html>
=================================================