HTML将文本对齐到图像的右侧？答案

【问题标题】：HTML Align text to right of image?HTML将文本对齐到图像的右侧？
【发布时间】：2016-10-29 16:19:44
【问题描述】：

我希望将“文本”移动到图像的右侧，当我对齐图像标签并使用 align="left" 时，它会将所有文本带到图像的右侧，但我希望标题保持在下方.我想我可能缺少一个附加标签来做到这一点。有什么建议？这是一封电子邮件。

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

【问题讨论】：

标签： html image email

【解决方案1】：

您可以为此使用 css inline-block 显示样式。

显示：内联块；

我还将 vertical-align:top 放在文本字段上，以便与图像对齐。

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

【讨论】：

感谢@Bob Brinks 这很有效，但如果我做得更多，它只会让我添加一行文本，它会将它带回到图像下方
向元素添加宽度将解决此问题（我已经更新了 sn-p）。您可以为此宽度使用像素或 %。

【解决方案2】：

看这里jsfiddle

将display:inline-block设置为图像和文本。
您还需要将vertical-align:top设置为文本，因为display:inline-block会自动设置vertical-align:baseline;

您也可以将此代码合并到 html 样式中

添加代码：

figure,#text-placeholder { 
   display:inline-block;
}

#text-placeholder {
   vertical-align:top;
}

【讨论】：

【解决方案3】：

制作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>

【讨论】：

【解决方案4】：

将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>

【讨论】：

感谢@BDD，它运行良好，是解决当前问题的最佳解决方案！
@c.hunter90 请注意，在较小的屏幕上使用此解决方案，“文本”会换行并被推到标题/图像下方