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

Question

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

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

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

为了实现这一点，我对（红色）图像使用<div>带有边距的 s auto，例如：margin:0 auto 0 0。

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

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