उत्तरदायी ईमेल टेम्पलेट में कॉलम कैसे ढेर करें?

Question

मैं बड़ी स्क्रीन पर एक तरफ कॉलम को प्रदर्शित करने की कोशिश कर रहा हूं और मोबाइल उपकरणों पर एक-दूसरे के ऊपर खड़े डिस्प्ले को प्रदर्शित करने की कोशिश कर रहा हूं लेकिन मैं अब तक असमर्थ हूं, मैंने उसी दृष्टिकोण का पालन करने की कोशिश की है ZURB used on their templates जहां उन्होंने div में जोड़ा 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; 
    } 
} 

यह सीएसएस ताकि वे से कंधा मिलाकर मत देखो से ठीक लगभग हर जगह है, लेकिन लग रहा है 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> 

एक ही सीएसएस वर्गों रखते हुए लेकिन फिर भी यह डेस्कटॉप क्लाइंट में समस्या ठीक होती है यह iOS उपकरणों पर कंधे से कंधा मिलाकर दिखता है:

कुछ मैं कर रहा करने की कोशिश की तालिका के बजाय कोशिकाओं div तरह का उपयोग कर रहा था यदि display: blocktd एस पर लागू नहीं हो रहा है)

किसी के पास कोई विचार है?

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>