如何在电子邮件HTML代码中实现文字环绕图片效果

邮件端HTML的渲染规则和普通浏览器差异极大，多数主流邮箱客户端对CSS float 属性的支持度很低，仅靠style内的float或者单独的align属性很难实现全兼容的文字环绕效果，按下面的方案调整即可：

修正后的代码 #

<td>
  <img src="myImg.png" align="right" width="300" hspace="10" vspace="10" style="margin: 0 0 10px 10px; width:300px;">
  <h5>bla bla bla</h5>
  <!-- 后续所有正文内容放在同一个td内都会自动环绕图片 -->
</td>

关键调整说明 #

• 邮件端优先使用HTML原生属性实现效果，兼容性远高于CSS样式：align属性直接写在img标签上，是目前全邮件客户端支持的文字环绕实现方式
• 用原生width属性定义图片尺寸，style里的width作为双重保险，避免部分客户端强制压缩图片
• hspace/vspace是HTML原生控制图片左右、上下边距的属性，比CSS margin兼容性更好，style内的margin作为补充给支持的客户端显示更合理的间距
• 所有需要环绕图片的文字内容必须和图片放在同一个<td>父容器内，不要拆分到不同单元格，否则环绕效果完全失效
• 不要给当前父级<td>加固定高度或者overflow:hidden属性，避免截断环绕的文字内容
• 需要实现图片左对齐、文字右环绕的效果，只要把align属性值改为left，对应调整边距方向即可

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