Cách xếp các cột trong mẫu email đáp ứng?

Question

Tôi đang cố gắng để các cột hiển thị cạnh nhau trên màn hình lớn và hiển thị xếp chồng lên nhau trên thiết bị di động nhưng tôi không thể cho đến nay, tôi đã thử theo cách tiếp cận tương tự ZURB used on their templates nơi chúng được thêm vào div s nổi và sau đó thanh toán bù trừ các phao trên các thiết bị nhỏ như:

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

và trong <style> thẻ của tôi:

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

Có vẻ tốt gần như ở khắp mọi nơi nhưng outlook.com apparently strips floats từ css để họ không nhìn bên bên đó.

Cái gì tôi cố gắng làm là sử dụng tế bào bảng thay vì div s như:

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

Giữ lớp CSS tương tự nhưng mặc dù nó sửa chữa vấn đề này trong các khách hàng máy tính để bàn có vẻ cạnh nhau trên các thiết bị iOS (như nếu số display: block không được áp dụng cho td s)

Bất kỳ ai cũng có ý tưởng?

Answer 1

Bạn nên chuyển sang sử dụng bảng thay vì div. Hãy xem xét đánh dấu HTML sau đây để tham khảo. Ngoài ra, hướng dẫn này sẽ rất hữu ích: 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>