レスポンシブ電子メールテンプレートに列を積み重ねる方法は？

Question

大きな画面に列を並べて表示し、モバイルデバイス上に重ねて表示する必要がありますが、今までできなかったのですが、divに追加したZURB used on their templatesと同じ方法で試してみました。 sが浮いて、その後のような小型デバイス上でフロートをクリア：

<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; 
    } 
} 

それは、CSSからほとんどどこでも正常に見えるが、outlook.com apparently strips floatsそこにある。 （として

<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 Sを使用していましたdisplay: blockがtdに適用されていない場合）

誰でも知っていますか？

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>