Заголовок изображения HTML5: изображение перемещается в следующую строку

Question

Я пытаюсь создать галерею изображений. Для отображения подписей под моими изображениями я использую следующий код

<div>

 <figure>
<img src="sample-image.png" />
<figcaption>Caption Here</figcaption>
</figure>

 </div>

Теперь проблема в том, что когда я запускаю страницу галереи, изображения выглядят следующим образом (рисунок-1). Второе изображение идет вниз. Я хочу отобразить изображения, как на рисунке 2, но я не знаю, какой код CSS написать для этого или как это исправить. Не могли бы вы помочь мне?

Заранее спасибо:)

Answer 1

в основном просто установите display: inline-block; white-space: normal; для фигуры и white-space: nowrap; для их родителя (при условии, что ваши цифры упакованы в общий контейнер)

Затем вам нужно будет внести небольшие корректировки, используя другие свойства (например, vertical-align)

см. Пример этого скрипта: http://jsfiddle.net/CDkNV/