CSS圖片和文字右側

Question

我需要把文本圖像附近.. 這是生成的顯示圖像的CSS代碼：

CSS：

#showbox { 
list-style: none; 
padding: 0; 
width: 973; 
height: 46px; 
background: white repeat; 
z-index: 12; 
position: relative; 
display: -webkit-box; 
-webkit-box-orient: horizontal; 
-webkit-box-pack: center; 
-webkit-box-align: center; 
display: -moz-box; 
-moz-box-orient: horizontal; 
-moz-box-pack: center; 
-moz-box-align: center; 
    } 
#showbox span { 
display: none; 
position: absolute; 
} 
#showbox a { 
width: 100%; 
display: inline; 
text-indent: -900%; 
position: absolute; 
outline: none; 
    } 
    #showbox a:hover { 
background-position: left bottom; 
    } 
    #showbox a:hover span{ 
display: inline; 
    } 
    #showbox .one { 
width: 46px; 
height: 46px; 
top: 0px; 
left: 0px; 
background: url(images/cerchio1.png) no-repeat; 
    } 
    #showbox .two { 
width: 46px; 
height: 46px; 
top: 0; 
left: 240px; 
background: url(images/cerchio2.png) no-repeat; 
    } 
    #showbox .three { 
width: 46px; 
height: 46px; 
top: 0px; 
left: 480px; 
margin-right: 12px; 
background: url(images/cerchio3.png) no-repeat; 
    } 
    #showbox .four { 
width: 46px; 
height: 46px; 
top: 0px; 
left: 720px; 
margin-right: 12px; 
background: url(images/cerchio4.png) no-repeat; 
    } 

---

HTML：

<div id="showbox"> 
<a class="one"></a> 
<a class="two"></a> 
<a class="three"></a> 
<a class="four"></a> 
</div> 

---

如果我想要圖像右側的文字，我該怎麼辦？ 我必須創建另一個文本框？ 此圖像的代碼是好的或可以刪除​​部分代碼？謝謝

Answer 1

你的代碼對我來說看起來很奇怪。我假設你想要使用圖像進行鏈接，是的？在這種情況下，我建議改變你的HTML這樣的：

<div id="showbox"> 
    <div class="one"><a><img src="images/img1.jpg"></a></div> 
    <div class="two"><a><img src="images/img2.jpg"></a></div> 
    <div class="three"><a><img src="images/img3.jpg"></a></div> 
    <div class="four"><a><img src="images/img4.jpg"></a></div> 
</div> 

要將文本添加到圖像的左鄰，我們簡單地寫出來：

<div id="showbox"> 
    <div class="one"><a><img src="images/img1.jpg"></a>Text</div> 
    <div class="two"><a><img src="images/img2.jpg"></a>Text</div> 
    <div class="three"><a><img src="images/img3.jpg"></a>Text</div> 
    <div class="four"><a><img src="images/img4.jpg"></a>Text</div> 
</div> 

這樣做，你應該能夠用這個CSS得到想要的結果：

#showbox { 
    padding: 0; 
    width: 973; 
    height: 46px; 
    z-index: 12; 
    position: relative; 
} 
#showbox .one { 
    position:absolute; 
    width: auto; 
    height: 46px; 
    top: 0px; 
    left: 0px; 
} 
#showbox .two { 
    position:absolute; 
    width: auto; 
    height: 46px; 
    top: 0; 
    left: 240px; 
} 
#showbox a, img { 
    float:left; 
} 

我來演示一下，我創建了this JSFiddle。我希望這有幫助！

編輯：

要在圖像的中間位置的文本垂直，我們需要修補一點;垂直對齊不是HTML最強的一面。但這是可能的。

拳頭，你需要編輯CSS一點。對於每個類.one，.two，.three，.four你需要添加

display:table-cell; 
vertical-align:middle; 

的display:table-cell; vertical-align:middle;確保在垂直中間框內定位元素，可以這麼說。不幸的是，這還不夠（我提到垂直對齊不是HTML最強的一面嗎？）。我們還需要向CSS添加

#showbox p{ 
    position:relative; 
    float:right; 
} 

。我們還添加了margin-right:5px;到#showbox img,a子句中的CSS：

#showbox a, img { 
    float:left; 
    margin-right:5px; 
} 

這是爲了確保所有HTML和文本的圖像或鏈接的權離開圖像或鏈接5px的路程。

最後，在HTML，我們簡單地把文本中<p>標籤，就像這樣：

<div id="showbox"> 
    <div class="one"> 
     <a><img src="images/img1.jpg"></a> 
     <p>Text</p> 
    </div> 
    <div class="two"> 
     <a><img src="images/img2.jpg"></a> 
     <p>Text</p> 
    </div> 
    <div class="three"> 
     <a><img src="images/img3.jpg"></a> 
     <p>Text</p> 
    </div> 
    <div class="four"> 
     <a><img src="images/img4.jpg"></a> 
     <p>Text</p> 
    </div> 
</div> 

爲了證明，我已經updated the JSFiddle。