<figure> элементы не выстраиваются горизонтально, когда div-дисплей установлен на inline

Question

Я пытаюсь выстроить 3 изображения (каждый из которых заключен в свой собственный тег div) по горизонтали. Когда я устанавливаю отображение: inline в css, я получаю именно тот результат, который я хочу.

Проблема заключается в том, что я добавляю метку рисунка к каждому изображению (так что у меня может быть figcaption под каждым изображением). Теперь 3 изображения выстраиваются вертикально, один под другим. Как я могу это исправить?

HTML

<div class="projectGallery"> 
    <div class="projectContainer"> 
     <figure> 
     <img src="http://images.clipartpanda.com/penguin-clip-art-aiq5zAqiM.png" class="projects" class="projects"/><figcaption></figcaption> 
     </figure> 
    </div> 
    <div class="projectContainer"> 
     <figure> 
     <img src="http://img03.deviantart.net/c670/i/2013/086/5/2/golden_gate_bridge_by_ev_sta-d5zg113.jpg" class="projects"/><figcaption></figcaption> 
     </figure> 
    </div> 
    <div class="projectContainer"> 
     <figure> 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/a6/ee/6f/a6ee6f0db923eb8919803b89f37939ee.jpg" class="projects" class="projects"/><figcaption></figcaption> 
     </figure> 
    </div> 
</div> 

CSS

div.projectGallery { 
text-align: center; 
padding-top: 60px; 
} 

div.projectContainer { 
display: inline; 
margin: 20px; 
} 

img.projects { 
max-width: 20%; 
height: auto; 
width: auto\9; 
border:1px solid #A1B7CC; 
} 

Answer 1

, чтобы сделать ваш DIV в горизонтальном положении я предлагаю использовать

display:inline-block 

В вашем CSS отредактируйте display:inline в display:inline-block

div.projectContainer { 
display: inline-block; 
margin: 20px; 
} 

Надеюсь, что эта помощь.