0

因此，我在左侧设置了一个简单的页面，其中包含三个图像。在每张图片下方，我想添加三行：一张纯文本、一张带链接的图片和一张 javascript 输出。

第一行的绿色文本：

<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/

问题应该很明显了！

非常感谢帮助。

4

2 回答 2

1

至少在 jsfiddle 中float: left删除这有帮助。.imgleft

于 2012-11-25T15:28:48.033 回答
0

在我看来，您需要三个容器 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-25T16:51:10.070 回答