2列圖像列表（圖和figcaption）

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，條等）：這裏

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