我正在尝试创建一个图片库。要在我的图像下方显示标题，我使用以下代码
<div>
<figure>
<img src="sample-image.png" />
<figcaption>Caption Here</figcaption>
</figure>
</div>
现在的问题是，当我运行图库页面时，图像如下所示(图 1)。第二个图像下降。我想显示如图 2 中的图像，但我不知道为此编写什么 CSS 代码或如何修复它。你能帮帮我吗？
提前致谢:)
最佳答案
基本上只是设置display: inline-block; white-space: normal; 用于 figure 和 white-space: nowrap; 到他们的父级(假设你的 figure 被包装在一个公共(public)容器中)
然后您需要使用其他属性进行一些小的调整，(例如vertical-align)
请参阅此示例 fiddle :http://jsfiddle.net/CDkNV/
关于HTML5 图片说明 : Image moves to next row，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9534749/