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

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

M008
PHP Hero Member
PHP Hero Member
Posts: 109
Joined: 03/05/2013 10:44 am

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

Postby M008 » 01/06/2013 5:42 pm

เขียนคำบรรยายใต้รูปด้วย 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 ดังรูป
Attachments
1.jpg
1.jpg (40.7 KiB) Viewed 694 times

Return to “Share Knowledge”

Who is online

Users browsing this forum: facebook.com [Crawler] and 30 guests