เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>แบบจำลองย่อขนาดหอ
    Eiffel tower ในกรุง Parc Mini-France
</div>

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

[b]เขียนคำบรรยายใต้รูปด้วย Css[/b]
[b]HTML:[/b]
[code]<div class="figure">
<p><img src="eiffel.jpg" width="136"
height="200" alt="Eiffel tower">
<p>แบบจำลองย่อขนาดหอ
Eiffel tower ในกรุง Parc Mini-France
</div>[/code]
[b]Css:[/b]
[code]div.figure {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}[/code]
ใช้ style sheet ในการกำหนด class "figure" เพื่อ กำหนด format ให้รูปภาพตามที่ต้องการ เช่น เมื่อต้องการให้รูปลอยอยู่ทางขวา กินพื้นที่ 25% ของความกว้างย่อหน้าทั้งหมด สามารถทำได้โดย กำหนดใน style sheet ดังรูป