Duyarlı e-posta şablonunda sütunlar nasıl yığılır?

Question

Büyük ekranlarda yan yana sütunlar görüntülemek zorunda kalıyorum ve mobil aygıtlarda birbiri üzerine yığılmış olarak görüntülemeye çalışıyorum ancak şu ana kadar yapamadım, ZURB used on their templates aynı yaklaşımı izlemeye çalıştım ve div s süzülüyor ve sonra gibi küçük cihazlarda şamandıra temizleyerek:

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

ve <style> etiketinde: onlar yana görünmüyor böylece css ince hemen hemen her yerde ama outlook.com apparently strips floats görünüyor

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

oradaki taraf. (Aynı

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

aynı CSS sınıflarını tutulması ancak masaüstü istemcileri sorunu giderir rağmen bu iOS cihazlarda yan yana görünür: yaptığım çalıştı

şey tablo hücrelerini yerine gibi div s kullanarak oldu display: block, td s'ye uygulanmazsa

Herhangi bir fikri olan var mı?

Answer 1

Div'ler yerine tablolar kullanmaya geçmelisiniz. Referans için aşağıdaki HTML işaretine bir göz atın. Ayrıca, bu kılavuz çok yardımcı olur: 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>