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/