Question

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

Answer 1

首先将图像和文字放在如下框中：

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

然后漂浮那些盒子。

.contentBox{
    float:left;
}

我制作了一个快速代码段，向您展示如何使用它：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何将两个img放在一起，文本低于响应

1 个答案: