Jak układać kolumny w responsywnym szablonie e-mail?

Question

Próbuję wyświetlać kolumny obok siebie na dużych ekranach i wyświetlać jeden na drugim na urządzeniach mobilnych, ale do tej pory nie byłem w stanie, spróbowałem zastosować to samo podejście ZURB used on their templates, gdzie dodano do div s płynął, a następnie wyczyścić pływak na małych urządzeniach jak:

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

iw moim <style> tagu:

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

wygląda dobrze niemal wszędzie, ale outlook.com apparently strips floats z css więc oni nie wyglądają obok tam po stronie.

Coś próbowałem robić to przy użyciu komórek tabeli zamiast div Like:

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

zachowaniu tej samej klasy CSS, ale mimo to rozwiązuje problem w klientach stacjonarnych wygląda obok siebie na urządzeniach z iOS (jak jeśli display: block nie zostanie zastosowany do td s)

Ktoś ma pomysł?

Answer 1

Powinieneś przełączyć się na używanie tabel zamiast div. Spójrz na następujące znaczniki HTML w celach informacyjnych. Ponadto, ten poradnik będzie bardzo pomocne: 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>