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

非常感谢， Karolis

Answer 1

首先，我们需要修复你的标记（每个图只允许1个figcaption）。然后我们需要添加一些容器元素。我选择旁边作为我的容器，但它可以是任何感觉合适的块级元素（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;
}

2列图像列表（图和图）

1 个答案: