3

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

我想要做的就是有一个图像，然后在该图像之后有一些文本，并且能够准确地控制图像和文本之间的空间量。

这是我的代码：

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

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

用户名

年龄

地点

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

提前感谢您的帮助。

4

5 回答 5

2 
<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因为我不确定为什么会出现。

于 2012-11-24T17:31:52.937 回答
1

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

于 2012-11-24T17:33:55.090 回答
1

只需对文本使用无序列表，因为它是一个列表。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; }
于 2012-11-24T18:28:44.697 回答
0

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

这是我开始摆弄 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;

 }

我确定我让这种方式变得比它需要的更复杂！对不起。

于 2012-11-24T18:47:03.553 回答
0

如果有人可以看一下，我已经在第一个答案的评论中放置了我的代码的链接。谢谢。

于 2012-11-24T20:35:19.323 回答