Question

现在可以在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">

Answer 1

使用this technique使用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>

Answer 2

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

以下是一个例子：

<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时，所有用户都看到相同的布局。当显示器低于600px时，被归类为流体的元素将填满屏幕。如果电子邮件客户端不支持媒体查询，则用户仍然可以看到完全可读的电子邮件，他们只需移动内容即可全部阅读。

此方法适用于Android，iPhone和Windows手机。 Gmail有点痛苦，因为它会删除任何不内联的CSS而无法使用。但是，这是在编写3打不同的电子邮件客户端时必须达到的平衡...

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

2 个答案: