使用CSS來控制圖像下方的文本

所以我有一個簡單的頁面，在左邊設置了三個圖像。在每幅圖像下面，我想添加三行：一個純文本，一個帶鏈接的圖像和一個javascript輸出。使用CSS來控制圖像下方的文本

上第一行的綠色文本：

<font color="green">User69</font>

然後從下一行的帶有鏈接的GIF：

<a href="http://google.comcom/?a=7337&c=6380&s1="><img src="online01.gif" alt="" border="0" style="float:center"></a><br>

在第三行上的JavaScript輸出：

Location: 
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script> 
     <script language="JavaScript">document.write(geoip_region_name());</script></span> 
</script></br>

每張圖像後的三位。

您現在可以看到文字遍佈整個地方。圖像是在正確的地方。但是除了換行符之外，我無法控制其他的東西，這很麻煩。一定會有更好的辦法。

這裏的一切的jsfiddle：http://jsfiddle.net/MzSZ4/1/

的問題應該是很明顯的！

非常感謝。

來源

2012-11-25 Charles L

我建議使用http://jsfiddle.net/來證明你的問題。 –

完成。鏈接：http://jsfiddle.net/MzSZ4/1/ –

刪除float: left在.imgleft這有助於，至少在jsfiddle。

來源

2012-11-25 15:28:48

對我來說就像你需要三個容器div。每一個都包含圖像，以及你說的三段文字。例如： -

<div id=main-wrapper> 
    <!--box 1--> 
    <div class=box> 
    <img class=img> 
    <p class=toptext>TEXT</p> 
    <img class=giflink> 
    <p class=javascript-output> 
    </div> <!--end of box div--> 

    <!--box 2--> 
    <div class=box> 
    <img class=img> 
    <p class=toptext>TEXT</p> 
    <img class=giflink> 
    <p class=javascript-output> 
    </div> <!--end of box div--> 

    <!--box 3--> 
    <div class=box> 
    <img class=img> 
    <p class=toptext>TEXT</p> 
    <img class=giflink> 
    <p class=javascript-output> 
    </div> <!--end of box div--> 

</div> <!--end of main wrapper div-->

CSS：

float .box left

來源

2012-11-25 16:51:10 Mick79

使用CSS來控制圖像下方的文本

回答

相關問題