html - 这个html示例如何让2张图片并排显示？

Question

如何在这个特定的 html 示例中并排显示 2 张图片？

这是我的 fiddle

我想要的是在html中并排对齐图片，上面的h1标签和图片下面的p标签也是如此。

我想要的说明:

title0------------title1
pic0--------------pic1
word0-------------word1
^^^^^^^^^^^^^^^^^^^^^^^^^

这是我想要的例子fiddle ，但是这里当我想在上面添加h1标签和在图片下面添加p标签时，它不起作用。我喜欢，但是喜欢 margin-right 可以控制图片之间的横向距离的方式。

Here是一个类似的问题，但这略有不同。

EDIT1 这里是 bootstrap下面提到的版本

EDIT2 下面是其他解决方案

Amitesh Kumar - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
悠悠球 - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/

他们都提供了解决方案，但我认为 Bootstrap 版本是最好的，因为它在调整屏幕宽度时处理得最好.tks

Answer 1

您可以使用 display:inline-block; 将元素设置为仅使用它们的宽度。通常，h1 或 div 是 display:block; 元素。

这是 fiddle为你。