具有固定宽度中心和缩放左右边距的 HTML 电子邮件答案

【问题标题】：HTML e-mail with fixed-width center and scaling left and right margin具有固定宽度中心和缩放左右边距的 HTML 电子邮件
【发布时间】：2013-11-06 04:24:06
【问题描述】：

我正在尝试以 HTML 格式创建电子邮件通讯。布局具有固定宽度 (600px) 中心。如果视口宽度大于600px，那么左右两边应该有一些装饰图片。这些图像应该“粘合”到视口的边缘：

如您所见，当视口缩放时，固定宽度（蓝色）的内容保持居中，但左侧和右侧的（红色）图像随着视口的边缘移动。

如果视口变得太窄，（红色）图像应该固定，这样它们就不会与（蓝色）中心内容重叠。

为了实现这一点，我将<div>s 和auto 边距用于（红色）图像，例如：margin:0 auto 0 0。

这很好用，除了在 iPhone 等小型设备上，我希望电子邮件客户端只显示（蓝色）居中的内容：

但是侧面带有（红色）图像的<div>s 会影响内容宽度，因此电子邮件客户端也会显示它们。

我怎样才能做到这一点？ 使用 Javascript 和/或 CSS 媒体查询不是一种选择，因为大多数电子邮件客户端会从电子邮件 HTML 中去除 CSS 和 JS。

【问题讨论】：

需要 CSS（但没有媒体查询）的最小答案对您有用吗？我看到的所有面向表格的答案都让我感到畏缩。 stackoverflow.com/questions/83073/…
CSS 没问题，只要能嵌入到style="..." 属性中即可。我不能使用<style> 或<link> 标签。
我已经在用了，看我的帖子。

标签： html email html-email

【解决方案1】：

你应该使用表格。

你需要 3 张桌子。

首先，好的旧定心台：

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">

然后，另一个以百分比为单位的 3 列居中表：

    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="15%" align="left" valign="middle">YOUR LEFT CONTENT HERE</td>
    <td width="70%" align="center"> YOUR MAIN CONTENT TABLE HERE </td>
    <td width="15%" align="right" valign="middle">YOUR RIGHT CONTENT HERE</td>

而且，在前一个中心的中间TD，可以放你600px宽的主内容表。

这可能需要一些样式调整，浮动和块元素对齐，但基本结构就在那里。

*表 2 嵌套在表 1 的主 TD 单元格中。

对于移动邮件客户端，只需在 LEFT 和 RIGHT 两个 td 上放置一个类，然后让它们显示：none;在您的媒体查询中。由于内容将嵌套在其中，它将继承显示无，您的 3 列表格将有效地成为单列表格。

【讨论】：

感谢您的回答，我会尝试您的建议。至于您对使用媒体查询的建议：问题是许多电子邮件客户端（例如 Gmail）不允许 CSS 或媒体查询。他们会在显示之前从 HTML 电子邮件中去除所有 <style> 标记。
确实，这是个问题。在您的 %ted 端 TD 中使用背景图像的建议解决方案可以克服这个问题，但并非每个邮件客户端都会在表格中显示背景图像。我猜你必须研究你的客户最常使用的东西并首先为他们构建。

【解决方案2】：

如果表格中间的单元格具有固定宽度，而其他两个单元格具有 a) 与任一侧对齐的背景图像，或者 b) 单元格上有带有 overflow:hidden 的图像，该怎么办？

【讨论】：

我查看了campaignmonitor.com/css，并认为您可以创建一种我上述技术的混合体，以吸引尽可能多的客户（通过巧妙地利用显示属性，例如，不支持的客户不会应用）。

【解决方案3】：

如果没有媒体查询，这是不可能的。没有办法让左右列在调整大小时弹出或隐藏。即使您使用浮动/对齐技术，它也只会弹出右侧（然后以左上方居中）。

我建议使用一个具有最大宽度 div 的流动表格，以将您的主要内容保持在 600 像素。

 <style>
    @media only screen and (min-device-width: 600px) { /* don't over stretch */
      .main {
        width:600px !important;
      }
    }
</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td width="15%" align="left">left
    </td>
    <td width="70%" align="center">
      <div class="main" style="max-width:600px !important;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td>
              center
            </td>
          </tr>
        </table>
      </div>
    </td>
    <td width="15%" align="right">right
    </td>
  </tr>
</table>

【讨论】：

啊，是的，最大宽度的 div 嵌套在 % TD 中，实际上这是一个好技巧……我可能想在未来的广告系列中使用它。嗯嗯嗯
我实际上正在开发一个使用这种技术的流体模板 ATM（减去侧边栏）。它远远优于媒体查询驱动的设计。特别是因为它在 Android 设备的 Gmail 中看起来很壮观。 @RLakone
而且上帝知道，关于 html 电子邮件，gmail 和壮观很少出现在同一个句子中......好吧，如果有机会，我会将此页面添加为书签并尽快使用它！ @约翰
你可以在顶部不使用媒体查询的情况下使用它——它只是一个后备，因为不完全支持 max-width。
另外，您仍然需要添加媒体查询来隐藏/切换侧边栏。由于不是 100% 支持媒体查询，您可能需要考虑默认隐藏侧边栏并使其在广泛的媒体查询中可见。您不会在客户端之间获得 100% 的一致性，因此您需要决定如何在 Gmail/非媒体查询客户端中妥协。减少损失并在桌面版 Gmail 中隐藏侧边栏可能比在移动设备中重叠或挤压侧边栏和内容更好（由于缺乏 MC 支持而无法隐藏）。

【解决方案4】：

这是您想要实现的更简单的解决方案。

对于红色元素，您可以继续使用margin: 0 auto 0 0...等设置它们的位置，但请包含以下CSS：

width: 0;
overflow: visible;
z-index: 1;

这样，红色元素在“相遇”时不会与蓝色<div>“冲突”。

对于蓝色的<div>，声明一个更高的 z-index：

z-index: 2;

由于蓝色的 z-index 高于红色，红色元素“重叠”时会隐藏在蓝色元素下方。

注意：gmail 尚不支持 z-index (source)，但您可以考虑通过 default stacking 创建相同的效果。

旁注：

它真的不必像使用表格那样复杂。阅读：Why not use tables for layout in HTML?

【讨论】：

是的，但他在做 html-email。表格仍然是最稳定的生产方式。而且gmail不支持z-index。
另外，outlook.com 不了解边距。 campaignmonitor.com/css
campaignmonitor.com/blog/post/3472/… 在这里，它解释了为什么 html 电子邮件仍然需要表格。
@Michelle html-email 与 web html 非常不同。简单地建议不要使用桌子是离基地很远的地方。应该避免溢出、z-index 和边距，因为它们不适用于大部分主要电子邮件客户端。
表格并不是实现这一目标的最佳方式。首先，如果您使用表格来执行此操作，则需要使用媒体查询，它不像我发布的 CSS 样式属性那样被广泛支持。 OP 还指定他/她不想使用媒体查询。