是否可以在 Outlook 2007+ 电子邮件中制作流畅的两列布局

Question

我正在编写电子邮件通讯，它必须在所有电子邮件客户端（包括 Outlook 2007+）中看起来正确。电子邮件的一部分包含两列，大致如下所示：

 ----------------------------------------
 |                 |                    |
 |                 |                    |
 |      fluid      |     340px wide     |
 |     content     |         ad         |
 |                 |                    |
 |                 |                    |
 ----------------------------------------

右栏中的广告应始终为 340 像素。左边的列应该收缩和增长以填充剩余的 space。只要屏幕保持足够大，使用基于 table 的布局很容易实现。

但是，对于较小的屏幕，例如手机，我们需要将广告和内容移到另一行，否则会强制水平滚动。我们最初使用浮动 div 以及左列上的最小宽度和最大宽度来完成此操作。但这在 Outlook 上不起作用，因为它既忽略了浮动又重新格式化了 div，而我们发现的针对 Outlook 异常的唯一解决方法是将我们的 div 转换为 tables（在这种情况下不起作用).

是否可以实现我们在 Outlook 2007+ 中尝试实现的目标？

我最接近的是下面的，它不是流动的：

    <table class="msoFix" width="270" cellpadding="0" cellspacing="0" align="left">
        <tr>
            <td width="15">&nbsp;</td>
            <td width="250" align="left" style="padding: 0px; font-family:Arial, Helvetica, sans-serif; color:###textColor#; font-size:14px; line-height:16px; font-weight:normal;">
                Content
            </td>
            <td width="5">&nbsp;</td>
        </tr>
    </table>

    <table class="msoFix" width="355" cellpadding="0" cellspacing="0" align="right">
        <tr>
            <td width="5">&nbsp;</td>
            <td width="345" align="right" style="padding: 0px;">
                Ad
            </td>
            <td width="5">&nbsp;</td>
        </tr>
    </table>

Answer 1

是的，这是可能的，您可以使用移动媒体查询，因为他们可以阅读它们...

看起来像这样。

@media max-width(380px) {
  table[class=left-column],
  table[class=right-column] {
    width: 100% !important;
  }
}

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3">
      
      <!-- give the tables a class then  use a media query for mobiles -->
      <!-- I've found that using 2-3% less than 100% width removes possible errors in outlook -->
      
      <table width="32%" cellpadding="0" cellspacing="0" align="left" class="left-column">
        <tr>
          <td width="15">&nbsp;</td>
          <td width="250" align="left" style="padding: 0px; font-family:Arial, Helvetica, sans-serif; color:###textColor#; font-size:14px; line-height:16px; font-weight:normal;">
            Content
          </td>
          <td width="5">&nbsp;</td>
        </tr>
      </table>

      <table width="65%" cellpadding="0" cellspacing="0" align="right" class="right-column">
        <tr>
          <td width="5">&nbsp;</td>
          <td width="345" align="right" style="padding: 0px;">
            Ad <!-- set the ad to 100% width -->
          </td>
          <td width="5">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

css-tricks 有一篇关于电子邮件响应栏的好文章。 https://css-tricks.com/ideas-behind-responsive-emails/

Answer 2

不确定这是否可行，但较新的东西（例如手机）应该与浏览器兼容，而 outlook 不兼容，因此您可以使用媒体查询将 tables 更改为适用于较小屏幕的块元素（允许堆叠) 并且这应该被 outlook 忽略，所以你应该仍然有 table 布局。但是要使 table 流畅，您需要在固定宽度的每一列上添加一个宽度，然后让流畅的列没有宽度。我还要合并上面的 2 tables:

@media (max-width: 345px) {
    .msoFix, .msoFix * {
        display:block;
        width:100%;
    }
    .msoFix td.spacer {
        display:none;
    }
}

<table class="msoFix" width="100%" cellpadding="0" cellspacing="0" align="left">
    <tr>
        <td width="15" class="spacer">&nbsp;</td>
        <td align="left" style="padding: 0px; font-family:Arial, Helvetica, sans-serif; background:green; font-size:14px; line-height:16px; font-weight:normal;">Content</td>
        <td width="5" class="spacer">&nbsp;</td>
        <td width="345" align="right" style="padding: 0px; background:blue;">Ad</td>
        <td width="5" class="spacer">&nbsp;</td>
    </tr>
</table>

Example Fiddle

是否可以在 Outlook 2007+ 电子邮件中制作流畅的两列布局

Is it possible to make a fluid two-column layout in Outlook 2007+ emails

html

css

email

outlook