如何在響應電子郵件模板中堆疊列？

Question

我想要在大屏幕上並排顯示列並顯示在移動設備上彼此堆疊，但我一直無法到目前爲止，我試圖按照相同的方法ZURB used on their templates他們添加到div ş自由浮動，然後清除在小型設備上的浮動，如：

<table> 
    <tr> 
     <td> 
      <div class="column" style="float: left; width: 300px;"> 
       <!-- content --> 
      </div> 
      <div class="column" style="float: left; width: 300px;"> 
       <!-- content --> 
      </div> 
     </td> 
    <tr> 
</table> 

在我<style>標籤：

@media screen and (max-device-width: 600px) { 
    .column { 
     width: auto !important; 
     float: none !important; 
     display: block !important; 
    } 
} 

看起來好像沒什麼幾乎無處不在，但outlook.com apparently strips floats從CSS所以他們不看並排那邊。

<table> 
    <tr> 
     <td width="300" align="left" class="column"> 
      <!-- content --> 
     </td> 
     <td width="300" align="left" class="column"> 
      <!-- content --> 
     </td> 
    <tr> 
</table> 

保持相同的CSS類，但即使它修復該問題在桌面客戶端是通過iOS設備上的側面看起來側（如：使用表格單元格，而不是div就像

東西我想這樣做是如果display: block不適用於td s）

任何人都有想法嗎？

Answer 1

你應該切換到使用表而不是div的。看看下面的HTML標記以供參考。此外，本指南將是非常有幫助的：http://www.campaignmonitor.com/guides/mobile/

<table cellpadding="0" cellspacing="0" border="0" width="600"> 
    <tr> 
     <td> 
      <table cellpadding="0" cellspacing="0" border="0" width="300" align="left"> 
       <!-- content --> 
      </table> 
      <table cellpadding="0" cellspacing="0" border="0" width="300" align="left"> 
       <!-- content --> 
      </table> 
     </td> 
    <tr> 
</table>