Come impilare le colonne nel modello di e-mail reattivo?

Question

Sto provando a visualizzare le colonne affiancate su schermi di grandi dimensioni e visualizzate sovrapposte l'una sull'altra sui dispositivi mobili, ma finora non ho potuto provare, ho provato a seguire lo stesso approccio ZURB used on their templates dove hanno aggiunto a div s galleggiare e quindi cancellare il galleggiante su piccoli dispositivi come:

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

e nella mia <style> tag:

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

sembra a posto un po 'ovunque, ma outlook.com apparently strips floats dal CSS in modo che non guardano fianco a lato lì.

Una cosa che ho provato a fare è stato utilizzando le celle della tabella, invece di div s come:

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

Mantenendo le stesse classi CSS, ma anche se si risolve il problema nel client desktop sembra fianco a fianco su dispositivi iOS (come se lo display: block non viene applicato allo td s)

Qualcuno ha un'idea?

Answer 1

Si dovrebbe passare a utilizzare tabelle anziché div. Dai un'occhiata al seguente codice HTML per riferimento. Inoltre, questa guida sarebbe molto utile: 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>