2

现在是否可以在 Gmail 中实现浮动或类似功能？

我在这里看到了关于 Gmail 和响应式电子邮件的类似问题，但我想看看是否有针对此特定实例的当前答案。这很可能是不可能的，所以我想确认一下。

我正在寻找一种不使用表格单元格的解决方案，以便每个元素都占据移动客户端的整个屏幕宽度。

div 和 table 都不起作用，我尝试了许多内联 CSS 的变体，但无济于事：

 <div style="width: 300px !important; display:inline !important; float:left !important;" >

<table style="width: 300px !important; display:inline !important; float:left !important;" border="0" cellspacing="0" cellpadding="0">
4

2 回答 2

2

使用此技术使用 html align 属性“浮动”两个相邻的表格。

但是，如果您希望某些东西是 100% 宽度，那么保证它的唯一方法是使用带有width="100%". 由于 Gmail 不接受媒体查询，因此无法同时进行浮动/对齐和全宽。

注意 - 在我的示例中，我使用了 320px，因为这是大多数 Android 手机的宽度，所以当表格堆叠时，它会显示为全宽。

编辑：这是一个完整的电子邮件示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    /* Client-specific Styles - last updated 18 July 2013 */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a[href^="tel"], a[href^="sms"] { text-decoration: default; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}

    .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" style="padding: 0px;">&nbsp;<br>table 1<br>...<br>&nbsp;

            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" style="padding: 0px;">&nbsp;<br>table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

      </div>
    </td>
  </tr>
</table>


</body></html>
于 2013-07-29T12:54:26.923 回答
1

对于 html 电子邮件，您无法真正使用基于表格的布局来逃避。恕我直言，真的没有其他好的选择。我发现使电子邮件具有响应性的最佳方法是使它们对每个人都是静态的，并对支持文档级媒体查询的客户做出响应。我通过构建我的电子邮件来做到这一点，就好像它们将是完全静态的，然后在显示小于 600 像素时在头部添加一个媒体查询。

这是一个例子：

<head>
<style>
  @media only screen and (max-width:599px) {
    .fluid {
      width:100% !important; /* override the fixed dimensions of the elements if media queries are supported */
      height:auto !important;
    }
  }
</style>
</head>

这样当显示在 600px 以上时，所有用户看到的都是相同的布局。当显示低于 600 像素时，被归类为流体的元素会填满屏幕。如果电子邮件客户端不支持媒体查询，用户仍然会看到完全可读的电子邮件，他们只需移动内容即可阅读全部内容。

这种方法适用于 Android、iPhone 和 Windows 手机。不过，Gmail 有点痛苦，因为它会剔除任何非内联的 CSS，从而使这种方式不起作用。但是，这就是为 3 打不同的电子邮件客户端编码时必须达到的平衡......

于 2013-07-29T03:29:11.427 回答