如何将两个img并排放置在响应式下方的文本答案

【问题标题】：How to place two img next to each other with text below responsive如何将两个img并排放置在响应式下方的文本
【发布时间】：2018-10-06 03:48:46
【问题描述】：

我正在从 PSD 文件制作我的第二个测试 HTML 文件。
在this 图片中，您可能会看到我的问题。
您能否指导我如何将两张图片并排放置，下面有文字？
我也希望它有响应。
例如，在大屏幕中，两个图像彼此相邻。在小屏幕中，每个图像在一个单独的行中。
非常感谢

【问题讨论】：

标签： html css image

【解决方案1】：

首先将图像和文本放在这样的框中：

<div class="contentBox">
    <img>
    <h3>some title</h3>
    <p>some text</p>
</div>

然后浮动那些框。

.contentBox{
    float:left;
}

我制作了一个快速的 sn-p 来向您展示如何使用它：

#boxes{
text-align:center;
}
.contentBox {
  display: inline-block;
  width: 200px;
  border: 1px solid black;
  margin: 20px;
}

.contentBox img {
  width: 100%;
}

.contentBox h3 {
  margin: 5px;
}

.contentBox p {
  text-align: justify;
  margin: 5px;
}

<div id="boxes">
  <div class="contentBox">
    <img src="http://via.placeholder.com/350x250">
    <h3>some title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p>
  </div>
  <div class="contentBox">
    <img src="http://via.placeholder.com/350x250">
    <h3>some title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p>
  </div>
</div>

【讨论】：

您的代码有效，但您在顶部的示例说使用 .contentBox {float:left;} 您不使用