0

我有这个图片链接：

<p class="alignright">
    <a target="_blank" href="...">
        <img width="230" height="158" align="right" style="margin-right: 30px;  margin-top: 20px;" src="some_source" >
    </a>
    text should go here
</p>

alignright 类如下所示：

.alignright {
    float: right;
    margin: 4px 0 1px 10px;
}

现在我尝试了几件事来在上面的图片链接下方放置文本（例如，我尝试使用 <br> 和图片标题），但一切都失败了。文本要么在左侧太远，要么甚至不在图像链接下方。

任何想法如何获取图像链接下方的文本？

谢谢！

4

4 回答 4

1

<p class="alignright"></p>标签放置后

<br style="clear: both;" />
some text here

文字将出现在图像下方。

于 2012-09-05T12:36:40.290 回答
1

您的意思是您希望文本与图像链接的左边缘对齐？

这意味着您必须将两个元素放入一个容器中并将 float:left 属性分配给这个容器：

我想这是我在您的示例中可以看到的“”。您确定 p 元素的宽度与图像链接的宽度相同吗？

否则文本将与页面上的任何位置的 p 边框对齐。

缩小 p-Element 的大小或将所有内容放入一个额外的容器中：

<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;">
  <a href="">IMAGE_LINK</a>
  <!-- A <br /> might be placed here -->
  Text
</div>
于 2012-09-05T12:49:45.290 回答
0

现场样品

只需添加 aspan或 a divwithclear:both属性，然后根据需要对齐文本。

编辑：

如果图像下方的文本是a，link那么只需将链接包装在p这样的标签内

<p><a href="#">Your Text</a></p>

通过这样做，您将作为一个元素link出现在下一行。pblock

Block元素在它们放置的位置之前和之后强制换行。

看演示

于 2012-09-05T12:38:46.040 回答
0

这是html文件

<a href="#" target="_blank"><img src=""><span id="title" >your text</span></a>

这是css文件

span#title {
text-align: center;
font-weight: bold;
}

span {
background: black;
bottom: 459px;
padding: 5px;
color: white;
opacity: 0.7;
position: absolute;
left: 8px;
width: 244px;
}

以这种方式尝试

于 2012-09-05T12:55:15.007 回答