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

Question

我有 2 个 div 的问题，它们必须彼此相邻显示，并且它们之间有空格。它必须是响应式的，最大宽度只能是 600 像素，而最小宽度必须是 280 像素。 当我在浏览器中打开 html 时，它实际上按预期工作，但是当我将其作为邮件发送时，两个 div 彼此相邻，空间位于第二个 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

作为 @N。伊万诺夫说：

电子邮件模板的工作方式与浏览器不同。最好使用table 标签而不是 div 来生成正确的 HTML 模板。

所以对于那些必须在 HTML 电子邮件中使用表格的人来说 ，我有一些关于他们如何全面执行的信息。我进行了一些测试并发现，虽然我找不到完美的解决方案，但我确实设法收集了一些有用的提示，以使您的表在大多数情况下都能正常运行。

---

表数学，认识盒子模型数学

---

事实证明，当将表格宽度、td 宽度、td 填充和CSS padding 放入搅拌机时，结果非常混乱。不一致，至少可以这么说。以下表为例：

<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>

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

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

但是，当表格宽度告别时，结果与 CSS 盒模型 没有什么不同。如果在原始示例中添加padding 并删除表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 pixelswide + 10 pixels padding = 120 pixels total。

**

嵌套表

**

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

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

source->

Answer 2

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