css - 使用 CSS 在图像后定位文本

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;
}

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

Username

Age

Location

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

在此先感谢您的帮助。

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 中删除了你的 ""，因为我不确定为什么在那里。