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

【问题标题】：How to make text labels stick next to an image in CSS?如何使文本标签贴在 CSS 中的图像旁边？
【发布时间】：2013-02-18 22:47:36
【问题描述】：

我在 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。

【问题讨论】：

.modal-body 和 .container-fluid 的 CSS 是什么？
添加相对于 .container-fluid no 的位置？
这 2 个类在引导程序中是默认的。但是我会在有问题的时候添加它们。
@DavidChase 解决了它。谢谢，我一定是太累了，看不到。
@ElijahYang 不用担心很高兴我能帮上忙

标签： html css image twitter-bootstrap

【解决方案1】：

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

【讨论】：