如何使文本标签贴在CSS图像旁边？

我在Bootstrap的模态中有一个图像，它具有围绕它的文本标签。因此，当我收缩浏览器时，文本的位置是至关重要的（它必须是响应准确的）如何使文本标签贴在CSS图像旁边？

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

我的尝试：

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

这应该做工精细，除了我不知道为什么绝对位置需要.modal-body为父母代替.container-fluid。

来源

2013-03-04 Elijah Yang

什么是'.modal-body'和'.container-fluid'的CSS？ – j08691 2013-03-04 18:34:20

添加相对于.container-fluid的位置否？ – 2013-03-04 18:35:08

这两个类是引导程序中的默认值。但是有一刻我会加入他们的问题。 – 2013-03-04 18:36:06

您需要添加位置：相对于.container-fluid

来源

2013-03-04 18:35:52 mgrsskls

如何使文本标签贴在CSS图像旁边？

回答

相关问题