Question

我希望将“文本”移动到图像的右侧，当我对齐图像标记并使用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>

Answer 1

您可以使用css内联块显示样式。

显示：内联块;

我还在文本字段中放置了vertical-align：top，以便与图像对齐。

＆＃13;

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

＆＃13;

Answer 2

将float: left添加到您的figure代码

＆＃13;

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

＆＃13;

Answer 3

制作HTML邮件时使用table，布局简单易行，并提供最佳支持。

＆＃13;

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

＆＃13;

Answer 4

点击此处 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;
}

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

4 个答案: