【问题标题】:Email templates: 2 responsive divs with empty space between them电子邮件模板:2 个响应式 div,它们之间有空格
【发布时间】:2017-10-02 14:38:05
【问题描述】:

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

【问题讨论】:

    标签: html css templates html-email


    【解决方案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 时——通过CSSHTML—the widthsthe 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 对于 tablecolumns 都是正确的:

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

    **

    嵌套表

    **

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

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

    source->

    【讨论】:

    • @whitesilly 使用我的回答中的提示,您可以在 td 与您的内容之间添加一个空的 td ,这将是您的空白空间,如果您给出,您也可以使用宽度百分比主表的宽度固定,用于响应式视图,您会将其标记为社区已回答。
    • 是的,对不起。再次感谢。试试看吧。
    • 您的回答提供了电子邮件的基本知识,这很好,但我个人会选择幽灵表和列。它会保持 OP 中的结构,并且可以使用 CSS 添加更多内容。
    • 是的,我同意,ghost table 将是 Outlook 中对齐问题的绝佳解决方案
    【解决方案2】:

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

    【讨论】:

    • 您好,感谢您的评论!我以前用过一张桌子,不知何故它更糟,这就是我使用 div 的原因。我想我会再试一次。
    • 看看这个:campaignmonitor.com/css 在电子邮件客户端 css 的支持方式非常不同
    猜你喜欢
    • 2015-11-11
    • 1970-01-01
    • 2013-09-16
    • 2019-12-02
    • 1970-01-01
    • 2017-04-28
    • 1970-01-01
    • 2019-01-22
    • 2013-09-01
    相关资源
    最近更新 更多