1

我有以下 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>

网页按照我的意愿包装文本，但电子邮件没有：

在此处输入图像描述

如何让文本正确换行？

4

3 回答 3

3

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

但是，Outlook 也会忽略您的 margin 属性，并且您的文本将与图像对接。要解决这个问题，请使用过时的属性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>

资料来源：

于 2017-04-12T12:39:32.510 回答
0

根据这篇关于 HTML 电子邮件的精彩文章...

你的 99% 的 CSS 都不起作用

因此，如果您想使用自定义 html 电子邮件变得非常沮丧和肮脏，那么您将无法使用表格。Mail Chimp 有一堆免费的 html 电子邮件模板，我建议您从这些模板开始...

于 2012-10-29T21:45:14.790 回答
0

您可以使用 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>
于 2014-10-20T10:03:15.310 回答