Question

我一直在尝试在HTML上放置多个图像，并在我放置的每个图像中写入文本。

我尝试了多种解决方案（我只知道基本的html和css），但它们都没有真正适用于我（有时当我调整窗口大小时，文本与成像器重叠等等）

在下面的小提琴中，我有3个图像对齐，文字＆＃34; Stack＆＃34;写在每个图像中。我怎么能写＆＃34;溢出＆＃34;在＆＃34; Stack＆＃34;旁边的每个图像内使用HTML？

＆＃13;

.images {
  display: inline;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
  width: 200px;
}

#content {
  display: block;
  margin: 0px;
  padding: 0px;
  position: relative;
  top: 90px;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
}

＆＃13;

<div id="content">
  <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
  <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
  <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
</div>

＆＃13;

Answer 1

如何使用div标记包装图像，然后使用绝对定位。像这样：

.images {
    display: inline;
    margin: 0px;
    padding: 0px;
    vertical-align:middle;
    width:200px;
    height: auto;
}
#content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#content div {
    position: relative;
}

h2 {
  position: absolute;
  top: 8px;
  left: 100px;
}

<div id="content">
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
</div>

Answer 2

使用absolute：

.images {
    display: inline;
    margin: 0px;
    padding: 0px;
    vertical-align:middle;
    width:200px;

}
#content {
    display: block;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 90px;
    height: auto;
    max-width: auto;
    overflow-y: hidden;
    overflow-x:auto;
    word-wrap:normal;
    white-space:nowrap;
}
div.test {
      position: relative;
      float: left;
}
p {
      position: absolute;
      top: 25%;
      left: 50%;
}

<div id="content">
    <div class="test"><img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    <p>oveflow</p></div>
    <div class="test"><img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    <p>oveflow</p></div>
    <div class="test"><img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    <p>oveflow</p></div>
</div>

在多个图像上写下文本

2 个答案: