我正试着把图像与标题并列。
默认情况下执行以下操作：
<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
多谢，卡罗利斯
首先，我们需要固定你的标记（每个图只允许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;
}
