如何让 2 张图片并排出现是这个 html 示例？

Question

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

这是我的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/
YoYo - https://jsfiddle.net/ThetHlaing10/ko1qsbom/2/
Michael_B - https://jsfiddle.net/HattrickNZ/ko1qsbom/8/
BTruong - https://jsfiddle.net/ko1qsbom/6/

他们都提供了一个解决方案，但我认为引导版本是最好的，因为当屏幕宽度调整为 best.tks 时它可以处理

Answer 1

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

这是给你的fiddle。

Answer 2

您可以将title0、pic0 和word0 放在一个div 中，并在该div 中添加一个类，这样您就可以使用css 将其浮动到左侧。另一方面，您在一个 div 中有 title1、pic1 和 word1，该 div 有一个可以将其浮动到右侧的类。

这是工作中的浮动：

.leftBlock {
     float: left;
}

.rightBlock {
     float: right;
}

看看这个 jsfiddle：https://jsfiddle.net/ko1qsbom/6/

还有更多关于浮动的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

使用 flexbox 并排定位非常简单。

这里有你需要的：

#container {
    display: flex;
    text-align: center;  /* optional */
}

<div id="container">

    <section>
        <h1 class="left">title0 </h1>
        <img class="left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
        <p class="left"><a>word0</a></p>
    </section>

    <section>
        <h1 class="right">title1 </h1>
        <img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
        <p class="right"><a>word0</a></p>
    </section>

</div>

有多种选项可用于对齐行中的两个部分（居中、间距、flex-start 等）。详情见这里：https://stackoverflow.com/a/33856609/3597276

---

在此处了解有关 flexbox 的更多信息：A Complete Guide to Flexbox

---

请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

Answer 4

试试这让他们的总宽度应该小于 100% 和float:left

HTML

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

<!--<h1 class="left">title0 </h1> --> 
<img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
<!-- <p class="left"><a>word0</a></p> -->


<!-- <h1 class="right">title1 </h1> --> 
<img class = "right" src="img_tree.png"  alt="pic1" style="width:304px;height:228px;">
<!-- <p class="right"><a>word0</a></p> --> 

CSS

/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
float:left
}

h1.right p1.right{
text-align: right;
}
.div1 {
  width:40%;
   float: left;
}
.div2 {
  width:40%;
  float: left;
}

你也可以使用display:inline-block;