html - 如何使文本标签贴在 CSS 中的图像旁边？

Question

我在 Bootstrap 的模式中有一个图像，它周围有文本标签。因此，当我缩小浏览器时，文本的位置至关重要（它必须响应准确）

我可以很容易地用一个文本也像这样在 png 中的图像来做到这一点，但我不喜欢它。

我尝试了什么：

HTML：

<div class="modal-body">
<div class="container-fluid">
<img class="" src="img/panel/cutaway-drawing.png">
  <span class="a">Open frame technology</span>
  <span class="b">Roxul rock wool</span>
  <span class="c">Camira fabric</span>
  <span class="d">Damped membrane technology</span>
</div>
</div>

CSS：

.a {
  position: absolute;
  top: 55%;
}
.b {
  position: absolute;
  top: 25%;
}
.c {
  position: absolute;
  top: 55%;
  left: 70%;
}
.d {
  position: absolute;
  top: 25%;
  left: 70%;
}

.a .b .c .d这应该可以正常工作，除非我不知道为什么绝对位置.modal-body作为父级而不是.container-fluid.

Answer 1

您需要添加 position:relative to .container-fluid