时间戳

首页 > 解决方案 > 如何正确分隔电子邮件中的内容？

html - 如何正确分隔电子邮件中的内容？

问题描述

我正在为 ActiveCampaign 创建一个电子邮件模板，我需要将 3 张图像放在一行中，彼此相邻，中间有 14 像素的填充。

我创建了一个带有表格的自定义 HTML 块，但我无法正确定位图像。

我希望它看起来像什么

我希望它看起来像什么

它在电子邮件客户端中的外观

它在电子邮件客户端中的外观

电子邮件布局设置为全角，但内容居中并占用 500 像素。因此表格宽度设置为 500px。

任何人都可以告诉我有什么问题吗？

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
    <td style="text-align: center;">

        <table width="500px" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; margin: 0 auto;">
            <tbody>
              <tr>
                  <td>
                   <a href=""><img style="padding: 0;" src="https://ac-image.s3.amazonaws.com/6/7/7/4/3/7/home/admin/new_email_templates/group-1.jpg?r=715459984">
                    </a>
                   </td>
                    <td>
                 <a href=""><img style="padding: 0;" src="https://ac-image.s3.amazonaws.com/6/7/7/4/3/7/home/admin/new_email_templates/group_2.jpg?r=1551841180">
                     </a>      
                  </td >
                  <td>
        <a href=""><img style="padding: 0;" src="https://ac-image.s3.amazonaws.com/6/7/7/4/3/7/home/admin/new_email_templates/group.jpg?r=269367714">
       </a>
      </td>
    </tr>
  </tbody>
</table>
</tr>
</td>
</table>

标签： htmlcssemailhtml-email

解决方案

多可惜。如此多的建议，其中一些选择了几个错误排序的标签，但没有一个发现这里的基本问题之一。您已经在 HTML 属性中定义了 CSS 宽度。
当然，我无法复制您的具体问题，但我可以在 Outlook 中看到问题并修复这个小宽度属性修复了这些问题。

  1. 查看您的内表，当使用 width="##" HTML 属性时，您不能使用 px （或这些属性中的任何单位）。它只是在寻找一个数字。
    因此，在您的情况下，将该属性和值更改为：width="500"。
    或者，您可以删除该引用并将其更改为 style="width:500px;" 但这不是绝对必要的。

  2. 我还建议删除 text-align:center; 从内部表格周围的表格单元格中添加 align="center"。除此之外，从表格中删除 margin:auto 因为这不会被某些电子邮件客户端识别，并且依靠表格单元格上的 align="center" 更安全。
    这将使您的桌子居中。尽管如果您希望它保持对齐，请保持原样。

删除内表并添加单元格填充不是解决方案。
除非绝对必要，否则请不要使用 cellpadding 或 cellspacing。那里有更好的选择。
老实说，我不敢相信有些人在没有自己测试的情况下盲目地提出建议。
此外，将表格宽度转移到样式标记而不是使用 HTML 宽度属性，因为某些电子邮件客户端不会使用/读取该属性，这一点是不正确的。
是的，您可以将您的宽度转移到样式标签，但您的 HTML 属性同样有效并且可以正常工作。您需要做的就是从图中删除 px 单位。

正如其他人所说，您还有几个需要重新排序的结束标签，但这不是主要问题。

以下是我要做的调整：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <table width="500" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;">
                <tbody>
                  <tr>
                      <td>
                       <a href=""><img style="padding: 0;" src="https://ac-image.s3.amazonaws.com/6/7/7/4/3/7/home/admin/new_email_templates/group-1.jpg?r=715459984"></a>
                       </td>
                        <td>
                     <a href=""><img style="padding: 0;" src="https://ac-image.s3.amazonaws.com/6/7/7/4/3/7/home/admin/new_email_templates/group_2.jpg?r=1551841180"></a>      
                      </td>
                      <td>
                        <a href=""><img style="padding: 0;" src="https://ac-image.s3.amazonaws.com/6/7/7/4/3/7/home/admin/new_email_templates/group.jpg?r=269367714"></a>
                      </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

对我的粗鲁回应道歉，这根本不是针对你的。
它针对大多数其他响应者。当人们在没有正确分析代码和/或在提出建议之前自己测试这些“修复”的情况下盲目回应时，这让我很恼火。
它给人的印象是抢分，而不是伸出援助之手。

试试上面的代码，让我们知道它是如何工作的。

推荐阅读