电子邮件模板：2 个响应式 div，它们之间为空 space

Question

我有 2 个 div 的问题，它们必须彼此相邻显示，它们之间有 space。它必须响应 ofc，最大宽度只能是 600px，而最小宽度必须是 280px。当我在浏览器中打开 html 时，它实际上按预期工作，但是当我将其作为邮件发送时，两个 div 紧挨着彼此， space 是在第二个 div 之上，而不是在它们之间。由于某种原因，它们也固定在左侧。它在浏览器中的外观（以及它应该的外观）：

每封邮件发送后的样子：

所以我真的不知道为什么它没有按预期工作.. 也很抱歉所有这些代码，但是如果你在浏览器中测试它，你可以看到它工作得很好，当用作邮件模板时它不会..

<div style="background: url('http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/hintergrund.png'); max-width: 700px; margin-left: auto; margin-right: auto;">
  <div class="layout two-col" style="Margin: 0 auto;max-width: 600px;min-width: 280px; width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
    <div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
      <div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
        <div style="">
          <div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
            <img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
          </div>
        </div>
        <div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
          <div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
            <h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
          </div>
        </div>
        <div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
          <div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
            <p style="Margin-top: 0;Margin-bottom: 20px;">..........</p>
          </div>
        </div>
        <div style="Margin-left: 20px;Margin-right: 20px;">
          <div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
            <a href="http://www.iuno-projekt.de/aktuelles.html?view=article&amp;id=194"><img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE</a>
          </div>
        </div>
        <div style="Margin-left: 20px;Margin-right: 20px;">
          <div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;">&nbsp;</div>
        </div>
      </div>
      <div style="Float: left; max-width: 40px; width: 40px; margin-left: auto; margin-right: auto;" align="center">
        <div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;">&nbsp;</div>
      </div>
      <div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">

        <div style="">
          <div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
            <img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
          </div>
        </div>

        <div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
          <div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
            <h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
          </div>
        </div>

        <div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
          <div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
            <p style="Margin-top: 0;Margin-bottom: 20px;">.........</p>
          </div>
        </div>

        <div style="Margin-left: 20px;Margin-right: 20px;">
          <div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
            <a href="http://www.iuno-projekt.de/aktuelles.html?view=article&amp;id=194"><img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE</a>
          </div>
        </div>
        <div style="Margin-left: 20px;Margin-right: 20px;">
          <div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

电子邮件模板的工作方式与浏览器不同。您最好使用 <table> 标签而不是 div 来生成合适的 HTML 模板。此外，您应该只使用内联 CSS 而不要使用任何类例如 bootstrap 。希望这对您有所帮助！

Answer 2

作为@N。伊万诺夫 说：

Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the table tag rather than divs.

对于那些必须在 HTML 电子邮件中使用 table 的人来说 ，我有一些关于他们如何全面执行的信息。我运行进行了一些测试并发现，虽然我找不到完美的解决方案，但我确实设法收集了一些有用的技巧，以使您的 table 大部分表现良好。

Table 数学，认识盒模型数学

所以事实证明，当将 table 宽度、td 宽度、td 填充和 CSS padding 放入搅拌机时，结果非常混乱。不一致，至少可以这么说。举个例子，下面的 table:

<table cellspacing="0" height="450" cellpadding="0" border="1px" width="400">

<tr height="100%">

<td width="100" border="1px" height="100%"></td>

<td width="300" border="1px" height="100%"></td>

</tr>

</table>

正如预期的那样，此 table 的结果宽度为 400 pixels，列宽为 100 and 300 pixels:

但是当添加一些 padding 时——通过 CSS 或 HTML—the widths 或 the columns 被破坏：

然而，当 table 宽度被吻别时，结果与 CSS 盒模型 没有什么不同。如果将 padding 添加到原始示例并删除 table width，则代码如下所示：

<table cellspacing="0" height="450" cellpadding="10" border="1">

<tr>

<td width="80" height="100%" border="1"></td>

<td width="280" height="100%" border="1"></td>

</tr>

</table>

并且，正如预期的那样，结果 widths 对于 table 和 columns 都是正确的：

但请注意如何减小 td 宽度以适应新的填充。这就像 CSS 盒子模型 ，其中 100 pixels 宽 + 10 pixels padding = 120 pixels 总数。

**

嵌套 Tables

**

如果 table 嵌套在另一个中，则上述规则适用，但有几个重要差异除外：

Yahoo Mail（新）、Gmail、Outlook 2007 和 Eudora 应用额外的宽度来说明边框。但只有当它们嵌套时，作为父级 table 的行为才恰当。
将宽度应用于也具有 CSS 或 HTML 填充的 td 标签会造成全面混乱。几乎每个客户端都以自己独特的方式呈现宽度。
即使没有任何边框，对于具有两列的嵌套 table，宽度也会有 2-4 个像素的差异。我的测试对于这种不自然现象背后的韵律和原因尚无定论。只知道像素完美不是一个选项（除非这背后有一些隐藏的秘密）。

source->

电子邮件模板：2 个响应式 div，它们之间为空 space

Email templates: 2 responsive divs with empty space between them

html

css

templates

html-email

Table 数学，认识盒模型数学

嵌套 Tables