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

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

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

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

既是一个DIV和表不工作，我已经尝试了一些变化，以内嵌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">

来源

2013-07-28 jsuissa

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

来源

2013-07-29 12:54:26 John

谢谢，我尝试了类似的解决方案更早。在Outlook中很好，但在Gmail中，即使宽度总和低于600px，两个表格也会堆叠在一起，而不是浮动或内联显示。我相当肯定以及两个答案到目前为止，这是不可能的。 – jsuissa

@jsuissa只是将代码添加到我的答案的底部。经过测试，它可以在Gmail和Outlook 2007中使用。它在Litmus的所有功能上似乎都可以工作，但如果不能调整视图的大小，很难确定。如果表格并非坐在一起，请尝试扩大浏览器窗口。 – John

非常感谢。我在Litmus尝试了你的代码，这是迄今为止我见过的最好的结果，但是表格仍然在Gmail和Yahoo中堆叠。 [石蕊试验]（https://litmus.com/pub/562a569） – jsuissa

你真的不能逃脱使用基于表格布局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，因此无法正常工作。但是，这是您在为三十多个不同的电子邮件客户端编码时必须采取的平衡措施......

来源

2013-07-29 03:29:11

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

回答

相关问题