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

Question

我正在尝试创建一个页面，它看起来像附加的图像。 [![在此处输入图片描述][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>`

然后 CSS 我有 div 和标签是这样的：

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

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

对此有任何帮助或建议都会有很大帮助...

Answer 1

好的，我明白我在做什么了。基本上，我在 <figure> 之前添加 <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>

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

Creating a Category Page with Thumbnails and Captions Underneath.....<figure> or <aside>

html

css

figure

caption