2 列图像列表（图和图说明）

Question

我正在尝试将图像与标题并排放置。

默认情况下开箱即用，执行以下操作：

<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<img src="2.jpg" width=320 height=240 alt="Image 2">
<img src="3.jpg" width=320 height=240 alt="Image 3">
<img src="4.jpg" width=320 height=240 alt="Image 4">
</figure>

如果我的宽度允许，我会并排获得图像列表。我得到我想要的。是这样的2列图像：

Image 1 Image 2
Image 3 Image 4

现在如果我添加 figcaption 如下：

<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<figcaption>caption 1</figcaption>
<img src="2.jpg" width=320 height=240 alt="Image 2">
<figcaption>caption 2</figcaption>
<img src="3.jpg" width=320 height=240 alt="Image 3">
<figcaption>caption 3</figcaption>
<img src="4.jpg" width=320 height=240 alt="Image 4">
<figcaption>capton 4</figcaption>
</figure>

一切看起来像这样：

Image 1
caption 1 
Image 2 
caption 2 
Image 3  
caption 3 
Image 4
caption 4

我也在玩列表、层次结构和 css。

问题是我怎样才能做到以下几点？

Image 1 Image 2 
caption 1 caption 2 
image 3 Image 4   
caption 3 caption 4

非常感谢， 卡罗利斯

Answer 1

首先，我们需要修正您的标记（每个图只允许 1 个图题）。然后我们需要添加某种容器元素。我选择放在一边作为我的容器，但它可以是任何感觉合适的块级元素（div、section 等）：

http://jsfiddle.net/ZksyN/2/

<aside class="figures">
<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<figcaption>caption 1</figcaption>
</figure>

<figure>
<img src="2.jpg" width=320 height=240 alt="Image 2">
<figcaption>caption 2</figcaption>
</figure>

<figure>
<img src="3.jpg" width=320 height=240 alt="Image 3">
<figcaption>caption 3</figcaption>
</figure>

<figure>
<img src="4.jpg" width=320 height=240 alt="Image 4">
<figcaption>capton 4</figcaption>
</figure>
</aside>

这里的 CSS 足以让元素内联显示。您可能希望减少figure 的左右边距。我还取消了对必须显示的列数的任何限制，因此默认情况下它是响应式的（窄设备将获得 1 列，如果它们适合，超宽设备可以获得 3 或 4 列）。如果要为列数添加硬性上限，请在aside.figures 中添加一个等于（图像宽度 + 侧边距）* 列数的 max-width。

aside.figures {
    overflow: hidden; /* only needed if floating the child elements instead of using inline-block */
}

aside.figures figure {
    display: inline-block;
    border: 1px solid;
}