css - 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>

我会并排显示图像列表，具体取决于我的宽度是否允许。我得到我想要的。就是这样的两列图片:

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 个图形标题)。然后我们需要添加某种容器元素。我选择 aside 作为我的容器，但它可以是任何感觉合适的 block 级元素(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 等于(图像宽度 + 边距)* 列数。

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