html - 这个html示例如何让两张图片并排显示?

标签 html css

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

这是我的 fiddle

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

我想要的插图:

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

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

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

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

编辑2下面是其他解决方案

阿米特什·库马尔 - https://jsfiddle.net/HattrickNZ/ko1qsbom/9/
悠悠-https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
迈克尔_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/

他们都提供了一个解决方案,但我认为引导版本是最好的,因为它在屏幕宽度调整大小时处理得最好。tks

最佳答案

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

这是fiddle为你。

关于html - 这个html示例如何让两张图片并排显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35005719/

相关文章:

html - 当我们关注链接时如何为 child 添加样式 block ?

javascript - Handsonetable - 无法隐藏列

javascript - 如果值为负,如何更改文本的颜色?

html - 我可以在浏览器中更改 WebKit CSS 规则吗?

html - 媒体查询不适用于视口(viewport)初始比例 0.25

html - 如何删除 css 中 <li> 之间的边距?

javascript - jQuery 将类添加到标签的子级以及所有标签的子级的子级

html - 使用 ngStyle 更改图像的颜色

javascript - 对于每个元素,javascript 删除父 div 并替换为自己的 div

Javascript:带按钮的循环声音。 bool 值错误