Question

我试图做一些我确信很简单的事情，但我做不到。

我想做的就是拥有一张图像，然后在该图像后面显示一些文字，并能够准确控制图像和文字之间的空间量。

这是我的代码：

<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
      <a href="http://google.com"><img src="30000000_1.jpg" style="position:absolute" width="189"></a>
</div>

在我的样式表中，wrap具有以下属性：

.wrap {
    /*text-align: left;*/
    width: 1100px;
    height: 870px;
    background-color: white;
    color: black;
    padding: 10px;
    margin: auto;
}

我希望我的文字在图片正下方看起来像这样：

用户名

年龄

位置

目前，我只是添加了大量的中断标记来控制文本的位置，但这很麻烦，必须有更好的方法。

提前感谢您的帮助。

Answer 1

<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<a href="http://google.com"><img src="30000000_1.jpg" style="position:absolute" width="189" /></a>
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>

CSS：

.wrap {
    /*text-align: left;*/
    width: 1100px;
    height: 870px;
    background-color: white;
    color: black;
    padding: 10px;
    margin: auto;
}

#bottomText{
    margin-top: 10px;
}

将margin-top: 10px更改为所需的距离。

如果您计划拥有多个，请将bottomText更改为课程而不是ID。

（注意：我从第二个""删除了您的div，因为我不确定为什么会这样。

Answer 2

检查此解决方案jsfiddle。我个人不会使用内联样式，因为它变得更加凌乱。我使用<ul>作为文本。这可以让您更好地控制文本的位置。

Answer 3

只需对文本使用无序列表，因为它是一个列表。 ul是“块级元素”，因此它们会自我清除。绝对使用外部样式表与内联样式。外部更清洁，更容易使用和更改。示例：http://jsfiddle.net/codeview/Fk3EK/

HTML：

<div class="wrap">  
<a href="http://google.com"><img src="30000000_1.jpg"></a>  
<ul>  
<li>Username</li>  
<li>Age</li>  
<li>Location</li>  
<ul>  
</div>

CSS：

.wrap {  
    /*text-align: left;*/  
    width: 1100px;  
    height: 870px;  
    background-color: yellow;  
    color: black;  
    padding: 10px;  
    margin: auto;  
}  
ul { list-style-type:none; }  
li { padding:5px 0; }

Answer 4

我无法让它发挥作用。可能是因为你们看不到我正在进行的其他代码。但也许我正在以错误的方式解决问题。

在我开始摆弄css定位之前，这是我的代码：

<br><br>

 <div class="imgleft">
 <a href="http://image.jpg" alt="" border="0"></a></div>

    <br><br><br><br><br><br><br><br><br><br><br>

        <span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
    <font color="green">    User69 </font> <a href="google.com"><img src="online01.gif" alt="" border="0" style="float:center"></a><br>

        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>


<br><br>

问题是，图像有一个设定的宽度，但高度不同，所以有时我会使用8个断点标签，其他时间为7，但每个图像下方的确切距离（文本所在的位置）是不同的。它看起来很糟糕。

页面上有3个图像，因此它会在图像下面显示图像，文本（也就是图像，闪烁的gif），然后是图像下方的另一个图像，依此类推。从页面左侧的顶部到底部。

以下是我的css中的相关位：

.imgleft {
float: left;
width: 120px;
}

.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;

 }

我确信我这样做比它需要的更复杂！抱歉。

Answer 5

如果有人可以看看，我已在第一个回答的评论中添加了我的代码链接。谢谢。

使用CSS在图像后定位文本

5 个答案: