如何使文本標籤貼在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圖像旁邊？

回答

相關問題