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

现在，如果我添加下面的图注：

<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个图注）。然后我们需要添加某种容器元素。我选择aside作为我的容器，但它可以是任何感觉合适的块级元素(div、section等）：

http://jsfidle.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.figure中添加等于（图像宽度+边距）*列数的最大宽度。

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;
}