Question

我希望所有三张图片都显示在一行中，各自的标题如下所示。

我已经使用了display: inline-block;，因为我看到大多数答案都提示了，而且图片仍在换行到另一条线。

见下面的代码。

请注意，在此实例中我无权访问外部CSS文件，因此我需要通过内联代码进行寻址。

<div style="display: inline-block; padding-right: 10px;">
<figure><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/20160623_172407_resized.png"}}" alt="Previous Winner" width="300" /><figcaption>Michelle D. - Bakersfield, CA<br /> Fitbit&reg; Winner<br /> Spring 2016</figcaption></figure>
<figure><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Check_winner__2.png"}}" alt="Previous Winner" width="300" /><figcaption>Gilberto M. - Hanford, CA<br /> $1,000 Cash Winner<br /> Summer 2016</figcaption></figure>
<figure><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Eric_Boettcher.png"}}" alt="Previous Winner" width="300" /><figcaption>Eric B. - Brentwood, CA <br /> Baseball Getaway Winner<br /> Spring 2016</figcaption></figure>
</div>

Answer 1

在您的情况下，div显示内联块

给每个img标签宽度：100％。

给每个图显示内联块

这里的小例子：

fiddle- click here

Answer 2

要成功完成此操作，请在图元素上添加display: inline-block;。我也删除了你在小提琴上看到的边距。

您可以看到图元素具有以下默认属性：

figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

来源：http://www.w3schools.com/tags/tag_figure.asp

你的HTML：

<div>
<figure style="display: inline-block; float: left; margin: 0;"><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/20160623_172407_resized.png"}}" alt="Previous Winner" width="300" /><figcaption>Michelle D. - Bakersfield, CA<br /> Fitbit&reg; Winner<br /> Spring 2016</figcaption></figure>
<figure style="display: inline-block; float: left; margin: 0"><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Check_winner__2.png"}}" alt="Previous Winner" width="300" /><figcaption>Gilberto M. - Hanford, CA<br /> $1,000 Cash Winner<br /> Summer 2016</figcaption></figure>
<figure style="display: inline-block; float: left; margin: 0"><img title="Previous Winner" src="{{media url="wysiwyg/imgs/cms_pages/Eric_Boettcher.png"}}" alt="Previous Winner" width="300" /><figcaption>Eric B. - Brentwood, CA <br /> Baseball Getaway Winner<br /> Spring 2016</figcaption></figure>
</div>

您可以从div中删除它。请在此处查看指向小提琴的链接：https://jsfiddle.net/john_h/w3uebtnb/

如何将带有字幕的图像保留在一行/同一行？

2 个答案: