2013-05-27 60 views
4

我想知道是否應該爲數字標記中的每個大拇指放置包裝div(如下面的示例代碼)?包裹數字標籤內的div?

<figure> 
    <div class="img-wrapper"><img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423." alt="The castle has one tower, and a tall wall around it."></div> 
    <div class="img-wrapper"><img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858." alt="The castle now has two towers and two walls."></div> 
    <div class="img-wrapper"><img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999." alt="The castle lies in ruins, the original tower all that remains in one piece."></div> 
</figure> 

或者是否有更合適/更簡單的方法來結合html5語義和拇指img元素的良好樣式?

+0

什麼,你所得到的是精美絕倫。 – Alohci

回答

4

建議使用嵌套圖/ figcaptions

<figure> 
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption> 
<figure> 
    <figcaption>Etching. Anonymous, ca. 1423.</figcaption> 
    <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it."> 
</figure> 
<figure> 
    <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption> 
    <img src="castle1858.jpeg" alt="The castle now has two towers and two walls."> 
</figure> 
<figure> 
    <figcaption>Film photograph. Peter Jankle, 1999.</figcaption> 
    <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece."> 
</figure> 
</figure> 

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element

+0

換句話說:在這種情況下,您可以將數字標籤視爲div,對嗎? – infralabs