创建带有缩略图和标题的类别页面.....<figure> 或 <aside>答案

【问题标题】：Creating a Category Page with Thumbnails and Captions Underneath.....<figure> or <aside>创建带有缩略图和标题的类别页面.....<figure> 或 <aside>
【发布时间】：2016-04-06 21:44:15
【问题描述】：

我正在尝试创建一个页面，该页面看起来像附加的图像。 [![在此处输入图像描述][1]][1] 我之所以能放入缩略图，是因为无论我做什么，缩略图都会像我编写代码一样排列，但是一旦我得到它们下面的文本链接，它就会失控。

我尝试使用 '

这是我目前得到的：

`<div id="ProductsBodyThmbs">
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 1</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 2</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 3</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 4</figcaption>
 <figure><img src="images/productThmb.jpg" alt="Product Thumbnails"></figure>
 <figcaption>Text Link 5</figcaption></div>`

然后我为那个 div 和标签准备的 CSS 是这样的：

#ProductsBodyThmbs {
float: left;
width: 640px;
}

figure {
width: 80px;    
float: left;
}

对此的任何帮助或建议将是一个很大的帮助......

【问题讨论】：

好的，我知道我在做什么了。基本上，我在添加
标签之前关闭了
。

标签： html css figure caption

【解决方案1】：

好的，我知道我在做什么。基本上，我正在关闭 <figure> BEFORE 添加<figcaption> 标签。所以基本上这里是下面的灵魂。我将<figcaption> INSIDE 包含在<figure> 标签中，现在一切正常。

<div class="ProductThmbsLeft">
<figure>
<img src="images/productThmb.jpg" alt="Product Thumbnails">              
<figcaption><a href="#">text text</a></figcaption></figure>
<figure>
<img src="images/productThmb.jpg" alt="Product Thumbnails">
<figcaption><a href="#">text text</a></figcaption></figure>
<figure>
<img src="images/productThmb.jpg" alt="Product Thumbnails">
<figcaption><a href="#">text text</a></figcaption></figure>
<figure>
<img src="images/productThmb.jpg" alt="Product humbnails">
<figcaption><a href="#">text text</a></figcaption></figure>
</div>

【讨论】：