如何实现图片浮动在文字右侧？附相关HTML代码示例

你当前的代码无法实现图片右浮动、文字在左侧环绕的核心原因有两个：

• <h1>标签内的<strong>元素设置了float: left属性，且<h1>本身为块级元素，默认占满父容器整行宽度，导致后续设置了float: right的图片被挤到标题下方
• 图片的放置位置在<h1>闭合标签之后，排版顺序上本身就晚于整行标题，自然无法和标题文字并排

方法1：调整元素顺序，删除不必要的浮动属性 #

这是兼容性最好的方案，适配绝大多数邮件客户端：

1. 删除<strong>标签上的float: left属性
2. 将<img>标签移动到<h1>标签的最前面，利用浮动的文本环绕特性实现效果

修正后的代码片段如下：

<table class="container" width="800" align="left" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" class="headline" bgcolor="#f2fafd" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Open Sans, sans-serif; font-size: 14px; line-height: 22px; color: #1E4286;">
      <!-- 将图片移到h1最前方 -->
      <img src="image/eblast toric advetorial precision1 p1-01.png"
        width="397" height="378" alt="" style="float: right;" />
      <h1 style="margin: 0; color: #61B0BD;" align="left" font-family:="open sans" color="#61B0BD" sans-serif;="" font-size:="25" 25px;="" line-height:="" 29px">
        <!-- 移除strong上的float: left属性 -->
        <strong style="text-align: left; color: #1e4286; font-size: 24px;"> Offer PRECISION1<span class="sup">®</span> Lenses to All Patients Interested in Daily Disposables— Including Astigmats! </strong>
      </h1> 
      <p><strong>Aaron Luekenga, <br>
</strong> OD Heritage Valley Eyecare<br> Santa Paula, CA</p>
      <p><em>Dr. Luekenga is a paid consultant for Alcon.</em></p>

方法2：给标题设置固定宽度并排 #

如果你需要保留原有元素顺序，可给<h1>设置固定宽度，让它和图片左右并排：
给<h1>添加样式width: calc(100% - 420px); float: left; margin: 0;即可，减去的420px是图片397px宽度加23px的预留间距，可根据实际需求调整数值。

注意事项 #

你当前用的是邮件场景的Table布局，部分老旧邮件客户端对CSS浮动的支持有限，建议给包含图片和文字的<td>添加清除浮动样式，避免父容器高度塌陷。

内容的提问来源于stack exchange，提问作者Brooke McMillin