Question

我有以下HTML，我发送电子邮件并用于创建网页。

<div>
   <a name="id-23"></a>
   <h2>Free Legal Defense Services for Lester et al</h2>
   <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3">
      <p><img src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" style="margin:5px;float:left;vertical-align:auto" />
         Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
   </div>
   </span>
</div>

网页按我的意愿包装文本，但电子邮件不包含：

enter image description here

如何让文字正确包装？

Answer 1

将图像放置在单独的表格单元格中，因为您的内容只是创建列 - 它不会将图像包裹在图像周围。使用过时的属性 align =“left”，您可以使您的电子邮件的行为与图片浮动到左侧并且文本环绕它的网站类似。

但是，Outlook也会忽略您的保证金属性，您的文本将与图像对接。要解决这个问题，请使用过时的属性 hspace =“5”（向左和向右添加5px的间距）和 vspace =“5”（将5px的间距添加到顶部和底部）。

不幸的是，没有办法使用这些属性来定位右侧和底部，因此您最终会在图像周围留出间距。如果您对否则，请继续阅读更复杂的方法。

如果您使用hspace和vspace，或者为图像添加空格，那么我建议从内联样式属性中省略margin属性（或将其设置为0）以避免电子邮件中的双倍间距不忽略它的客户。

<div>
   <a name="id-23"></a>
   <h2>Free Legal Defense Services for Lester et al</h2>
   <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3">
      <p><img src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" align="left" hspace="5" vspace="5" style="float:left;" />
         Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
   </div>
   </span>
</div>

更复杂的方法：

因为过时的属性“align”适用于图像和表格，我们会将您的单个图像放入表格中，然后浮动。然后，将填充应用于保存图像的单个表格单元格。

<div>
   <a name="id-23"></a>
   <h2>Free Legal Defense Services for Lester et al</h2>
   <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3">
      <!--[if mso]>
      <table align="left" border="0" cellpadding="0" cellspacing="0" width="130" height="60">
         <tr>
            <td style="padding: 0 5px 5px 0;">
            <![endif]-->
               <img align="left" width="125" height="53" style="float: left; width: 125px; height: 53px; margin: 0 5px 5px 0;" src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" />
            <!--[if mso]>
            </td>
         </tr>
      </table>
      <![endif]-->
      <p>
         Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
   </div>
   </span>
</div>

来源：

Answer 2

根据wonderful article about HTML Email ...

99％的CSS无法正常使用

所以，如果你想用自定义的html电子邮件弄得很糟糕，那么你就会陷入困境。 Mail Chimp有一堆免费的html电子邮件模板，我建议将它作为一个基础开始...桌子是一个痛苦的蠢货。

Answer 3

你可以使用tds的表行宽2！

而不是“float：right”试试这个

                  <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td >
                               your text Here                  
                            </td>
                            <td>
                                <div class="text">
                                    <img src="###" alt="" border="0" />
                                </div>
                            </td>
                        </tr>
                    </table>

如何在HTML电子邮件中浮动图像

3 个答案: