Html <；图>；当div display设置为inline时，元素未水平排列

我试着水平排列3个图像（每个图像都包含在自己的div标签中）。当我在css中设置display:inline时，我得到的正是我想要的结果

问题是，当我为每张图像添加一个地物标记时（这样我可以在每张图像下都有一个figcaption）。现在，这三幅图像垂直排列，一幅在另一幅下面。我怎样才能解决这个问题

HTML

---

为了使你的div处于水平位置，我建议使用

display:inline-block

在css中，将

display:inline

编辑为

display:inline块

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

---

希望有帮助。

使用

内联块

而不是

内联块

。有关为什么使用

display:inline块

而不是

display:inline

的更多说明，请参阅我尝试过使用内联块，但是图像仍然是垂直对齐的：由于

max width

的百分比，父元素周围有很多特殊的填充。

display:inline-block

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