2013-06-01 34 views
8

我想要在大屏幕上並排顯示列並顯示在移動設備上彼此堆疊,但我一直無法到目前爲止,我試圖按照相同的方法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)

任何人都有想法嗎?

回答

11

你應該切換到使用表而不是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> 
+0

謝謝,我沒有想到,我使用了兩個'td'元素 – javiervd