HTML将文本对齐到图像的右边？
HTML将文本对齐到图像的右边？
提问于 2016-06-27 15:14:48
我希望将“文本”移到图像的右侧，当我对齐图像标记并使用align=“左”时，它会将所有文本带到图像的右侧，但我希望标题保持在下方。我想我可能遗漏了一个附加标签来完成这个任务。有什么建议吗？这是一封电子邮件。
<figure style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<img src="http://image.comm.housingpartnership.net/lib/fe9513727667017c70/m/1/Robin+Hughes.jpg" title="Robin Hughes" alt="Robin Hughes" border="0" hspace="0" vspace="0" mdid="ff508d18-ad83-4b37-a12c-f8249c7917dc" width="160" height="240" style="width: 160px; height: 240px;" />
<figcaption>Caption Here</figcaption>
</figure>
<p id="text-placeholder" style="margin-top: 0px; margin-bottom: 0px;">
<font face="Arial">
<span style="font-size: 13px;">
Text
</span>
</font>
</p>
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-06-27 15:21:21
将float: left添加到figure标记中
<figure style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; float: left;">
<img src="http://image.comm.housingpartnership.net/lib/fe9513727667017c70/m/1/Robin+Hughes.jpg" title="Robin Hughes" alt="Robin Hughes" border="0" hspace="0" vspace="0" mdid="ff508d18-ad83-4b37-a12c-f8249c7917dc" width="160" height="240" style="width: 160px; height: 240px;" />
<figcaption>Caption Here</figcaption>
</figure>
<p id="text-placeholder" style="margin-top: 0px; margin-bottom: 0px;">
<font face="Arial">
<span style="font-size: 13px; display: inline;">
Text
</span>
</font>
</p>
Stack Overflow用户
发布于 2016-06-27 15:19:20
为此，可以使用css内联块显示样式。
显示:内嵌块；
我还把垂直对齐:顶部的文本字段，所以这是对齐的图像。
<figure style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; display:inline-block">
<img src="http://image.comm.housingpartnership.net/lib/fe9513727667017c70/m/1/Robin+Hughes.jpg" title="Robin Hughes" alt="Robin Hughes" border="0" hspace="0" vspace="0" mdid="ff508d18-ad83-4b37-a12c-f8249c7917dc" width="160" height="240" style="width: 160px; height: 240px;" />
<figcaption>Caption Here</figcaption>
</figure>
<p id="text-placeholder" style="margin-top: 0px; margin-bottom: 0px; display:inline-block; vertical-align:top; width: 200px">
<font face="Arial">
<span style="font-size: 13px;">
Text long sklsdfklsfkls fsf sdfd sa Text long sklsdfklsfkls fsf sdfd saText long sklsdfklsfkls fsf sdfd saText long sklsdfklsfkls fsf sdfd saText long sklsdfklsfkls fsf sdfd saText long sklsdfklsfkls fsf sdfd saText long sklsdfklsfkls fsf sdfd sa
</span>
</font>
</p>
Stack Overflow用户
发布于 2016-06-27 15:21:58
在制作HTML时使用table，它简单方便，布局简单，并且有最好的支持。
<table>
<tr>
<td>
<img src="http://image.comm.housingpartnership.net/lib/fe9513727667017c70/m/1/Robin+Hughes.jpg" title="Robin Hughes" alt="Robin Hughes" border="0" hspace="0" vspace="0" mdid="ff508d18-ad83-4b37-a12c-f8249c7917dc" width="160" height="240" style="width: 160px; height: 240px;" />
</td>
<td valign="top" style="font-family: Arial; font-size: 13px;">
Text
</td>
</tr>
<tr>
<td>
Caption
</td>
<td>
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38057564
复制相关文章
相似问题
腾讯云开发者
