Список изображений в 2 столбца (figure и figcaption)

Я пытаюсь разместить изображения рядом с подписями.

Это работает из коробки по умолчанию, делая следующее:

<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

Большое спасибо, Каролис


css figure
person user1885461    schedule 07.12.2012    source источник
comment
HTML5 Doctor говорит, что внутри рисунка допускается только 1 figcaption: html5doctor.com/the-figure-figcaption -элементы   -  person cimmanon    schedule 07.12.2012
comment
хорошо, спасибо, но моя цель - последний пункт, как сделать 2 столбца с ‹figure› и ‹figcaption› и css?   -  person user1885461    schedule 07.12.2012
comment
Используйте div: jsfiddle.net/ZksyN   -  person Anujith    schedule 07.12.2012
comment
большое спасибо! но в моем случае я должен использовать width: 1oo% вместо width: 320px, потому что иначе все путается, но в этом случае порядок снова только один за другим, а не рядом :/ - могу ли я использовать что-то с дисплей: блок или около того?   -  person user1885461    schedule 07.12.2012
comment
Нигде вы не указали что-либо, являющееся width: 100%. Это важные детали, которые необходимо предоставить, когда вы задаете вопросы.   -  person cimmanon    schedule 07.12.2012

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, нам нужно исправить вашу наценку (разрешена только одна 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;
}
person cimmanon    schedule 07.12.2012
comment
большое спасибо, это именно то, что я искал :) просто, коротко и работает! - person user1885461; 07.12.2012