반응 형 전자 메일 템플릿에 열을 쌓는 방법은 무엇입니까?

Question

대형 화면에 나란히 표시하고 모바일 장치에서 서로 위에 겹쳐서 표시해야하지만 지금까지 접근 할 수 없었습니다. div에 추가 된 ZURB used on their templates과 동일한 접근 방식을 시도했습니다. 이야 떠 다음과 같은 소형 기기에 플로트 삭제 :

<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> 태그 : 그것은 그들이 나란히 보이지 않는 있도록 CSS에서 잘 거의 모든 곳에서하지만 outlook.com apparently strips floats 보이는

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

을 옆에. (같은

<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의를 사용했다 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>