ใส่คำบรรยายภาพ ด้วย css

[M008]

เขียนคำบรรยายใต้รูปด้วย Css
HTML:

Code: Select all

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

Css:

Code: Select all

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;
}

ใช้ style sheet ในการกำหนด class "figure" เพื่อ กำหนด format ให้รูปภาพตามที่ต้องการ เช่น เมื่อต้องการให้รูปลอยอยู่ทางขวา กินพื้นที่ 25% ของความกว้างย่อหน้าทั้งหมด สามารถทำได้โดย กำหนดใน style sheet ดังรูป