Question

我正在尝试用HTML创建电子邮件简报。布局具有固定宽度（600px）中心。如果视口的宽度大于600px，则左侧和右侧应该有一些装饰图像。这些图像应该“粘合”到视口的边缘：

enter image description here

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

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

为实现此目的，我正在使用<div>个auto页边距作为（红色）图片，例如：margin:0 auto 0 0。

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

enter image description here

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

如何实现这一目标？使用Javascript和/或CSS媒体查询不是一种选择，因为大多数电子邮件客户端都会从电子邮件HTML中删除CSS和JS。

Answer 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 tds上放一个类，然后让它们显示：none;在您的媒体查询中。由于内容将嵌套在那些内容中，因此它将继承display none，并且您的3列表将有效地成为单个列。

Answer 2

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

Answer 3

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

我建议使用最大宽度为div的流动表，以使主要内容保持在600px。

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

Answer 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电子邮件

4 个答案: