HTML – 如何在响应式电子邮件模板中堆叠列？

概述我试图在大屏幕上并排显示列并在移动设备上叠加显示但是我一直无法到目前为止,我尝试遵循相同的方法 ZURB used on their templates,他们添加到div浮动和然后在小型设备上清除浮动,例如： <table> <tr> <td> <div class="column" style="float: left; width: 300px; 我试图在大屏幕上并排显示列并在移动设备上叠加显示但是我一直无法到目前为止,我尝试遵循相同的方法 ZURB used on their templates,他们添加到div浮动和然后在小型设备上清除浮动,例如：

<table>    <tr>        <td>            <div  >                <!-- content -->            </div>            <div  >                <!-- content -->            </div>        </td>    <tr></table>

在我的< style>标签：

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

它看起来几乎无处不在,但是从CSS到outlook.com apparently strips floats,所以它们并没有并排看待.

我尝试做的事情是使用表格单元格而不是div：

<table>    <tr>        <td wIDth="300" align="left" >            <!-- content -->        </td>        <td wIDth="300" align="left" >            <!-- content -->        </td>    <tr></table>

保持相同的CSS类,但即使它修复了桌面客户端中的问题,它在iOS设备上并排显示(好像显示：块未应用于tds)

有人有想法吗？

解决方法 你应该切换到使用表而不是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>

总结

以上是内存溢出为你收集整理的HTML – 如何在响应式电子邮件模板中堆叠列？全部内容，希望文章能够帮你解决HTML – 如何在响应式电子邮件模板中堆叠列？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。