2

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

在此处输入图像描述

在此处输入图像描述

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

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

为此，我对（红色）图像使用<div>带auto边距的 s，例如：margin:0 auto 0 0.

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

在此处输入图像描述

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

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

4

4 回答 4

4

你应该使用表格。

你需要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 上放置一个类，然后让它们 display:none; 在您的媒体查询中。由于内容将嵌套在其中，它将继承显示无，您的 3 列表将有效地成为单列表。

于 2013-11-05T19:27:15.157 回答
1

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

于 2013-11-05T19:29:19.030 回答
1

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

我会建议一个具有最大宽度 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>
于 2013-11-05T20:04:24.627 回答
-1

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

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

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

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

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

z-index: 2;

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

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

旁注：

它真的不必像使用表格那样复杂。阅读： 为什么不在 HTML 中使用表格进行布局？

于 2013-11-05T19:54:42.750 回答