Question

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

每封邮件发送后的效果如何：

所以我真的不知道为什么它不按预期工作.. 也很抱歉所有的代码，但如果你在浏览器中测试它，你可以看到，它完全正常，它不用作邮件模板..

＆＃13;

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

＆＃13;

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的{{1}}会受到影响：

但是，当桌面宽度被吻时，结果与 CSS框模型不同。如果将the columns添加到原始示例并删除了表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正确无误：

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

**

嵌套表

**

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

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

source->

Answer 2

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

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

2 个答案:

表格数学，符合框模型数学

嵌套表