Показать две фигуры с figcaptions бок о бок html5

Question

У меня возникла проблема с картиной изображений 2x2 с фиговыми надписями.

Я хотел бы что-то вроде этого:

----- ----- 
| | | | 
----- ----- 
Text Text 
----- ----- 
| | | | 
----- ----- 
Text Text 

Но то, что я получаю:

----- 
| | 
----- 
Text 

----- 
| | 
----- 
Text 
etc... 

Отображение фигуры, как блок, кажется, не помогает, когда прикрепляются figcomment Tages.

Еще одна проблема заключается в том, что Id все равно сможет укладывать в 1x4 на меньших экранах путь, которым могли бы обладать сырые метки.

Answer 1

Поместите изображения внутри контейнера <div> и используйте запросы @media, чтобы установить ширину контейнера. Установите изображение <div> шириной равной ширине, чем изображения. Вам нужно будет поиграть с настройками ширины в соответствии с вашими конкретными изображениями.

См. Пример на jsfiddle.

<style> 
    .container{width:600px;} 
    .photo{width:80px; font-size:80%; text-align:center; vertical-align:top; display:inline-block;} 

    @media screen and (min-width: 160px) { 
    .container{width:160px;} 
    } 
    @media screen and (min-width: 240px) { 
    .container{width:240px;} 
    } 
    @media screen and (min-width: 640px) { 
    .container{width:400px;} 
    } 
</style> 

<div class="container"> 
    <div class="photo"> 
     <img src="image.jpg" /> 
     This is the caption 
    </div> 
. 
. 
. 
</div>