現在可以在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">
使用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"> </td>
<td width="290" bgcolor="454545" style="padding: 0px;"> <br>table 1<br>...<br>
</td>
<td width="15" bgcolor="454545"> </td>
</tr>
</table>
<table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
<tr>
<td width="15" bgcolor="959595"> </td>
<td width="290" bgcolor="959595" style="padding: 0px;"> <br>table 2<br>...<br>
</td>
<td width="15" bgcolor="959595"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body></html>
你真的不能逃脫使用基於表格佈局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，因此無法正常工作。但是，這是您在爲三十多個不同的電子郵件客戶端編碼時必須採取的平衡措施......
謝謝，我嘗試了類似的解決方案更早。在Outlook中很好，但在Gmail中，即使寬度總和低於600px，兩個表格也會堆疊在一起，而不是浮動或內聯顯示。我相當肯定以及兩個答案到目前爲止，這是不可能的。 – jsuissa
@jsuissa只是將代碼添加到我的答案的底部。經過測試，它可以在Gmail和Outlook 2007中使用。它在Litmus的所有功能上似乎都可以工作，但如果不能調整視圖的大小，很難確定。如果表格並非坐在一起，請嘗試擴大瀏覽器窗口。 – John
非常感謝。我在Litmus嘗試了你的代碼，這是迄今爲止我見過的最好的結果，但是表格仍然在Gmail和Yahoo中堆疊。 [石蕊試驗]（https://litmus.com/pub/562a569） – jsuissa