Question

我有这个图片链接：

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

现在我尝试了几种方法将文本放在上面的图像链接下面（我尝试使用＆lt; br＆gt;和图像标题），但一切都失败了。文本左侧太远，或者甚至不在图像链接下方。

如何获取图片链接下方的文字？

谢谢！

Answer 1

在<p class="alignright"></p>代码放置

之后

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

文字将出现在图片下方。

Answer 2

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

这意味着你必须将两个元素放在一个容器中并将float：left属性赋值给这个：

我猜这是＆＃34;＆＃34;我可以在你的样本中看到。您确定p元素的宽度与图像链接的宽度相同吗？

否则文本将与页面上的p-borders对齐。

缩小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>

Answer 3

<强> Live Sample

只需添加span或div clear:both属性，然后根据需要对齐文字。

修改

如果图片下方的文字是link，那么只需将链接包含在p标记中，就像这样

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

通过这样做，link将显示在下一行，因为p是block元素。

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

<强> See Demo

Answer 4

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

尝试这种方式

左对齐文本在浮动的图像（链接）下？

4 个答案: