Question

我想有一行三张图片，每行有一行文字，但我找不到办法。我是HTML和CSS的新手。

＆＃13;

<div style="width: 100%;" class="images">
  <img src="FullSizeRender.png" alt="crossSection" style="max-width: 20%;">
  <h4>Text</h4>
  <img src="FullSizeRender.png" alt="crossSection" style="max-width: 20%;">
  <h4>Text</h4>
  <img src="FullSizeRender.png" alt="crossSection" style="max-width: 20%;">
  <h4>Text</h4>
</div>
</div>

＆＃13;

Answer 1

您应该使用background或position: absolute将图片放在图片上方。

以下是使用background的示例：

＆＃13;

.columnContainer {
  display: flex;
  flex-direction: row;
}

.imageContainer {
  flex-basis: 33%;
  text-align: center;
  background: url('http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') top no-repeat;
  background-size: cover;
}

＆＃13;

<div class="columnContainer">
  <div class="imageContainer">
    <h4>Text</h4>
  </div>
  <div class="imageContainer">
    <h4>Text</h4>
  </div>
  <div class="imageContainer">
    <h4>Text</h4>
  </div>
</div>

＆＃13;

说明：

问：我们在做什么？

首先，我们使用display: flex;制作三列样式：

.columnContainer {
  display: flex;
  flex-direction: row;
}
.imageContainer {
  flex-basis: 33%;
}

然后，我们使用：

在div上设置背景图片

background: url('http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') top no-repeat;

接下来，我们告诉它覆盖或填充div：

background-size: cover; /*or contain, that's up to you*/

你走了:)）

参见下面的一些参考文献：

将文本放在单行HTML CSS中的三个图像上

1 个答案:

说明：