我试图让列在大屏幕上并排显示,并在移动设备上相互堆叠显示,但到目前为止我一直无法做到,我尝试采用相同的方法 ZURB used on their templates他们添加到 div
的地方s float ,然后清除小型设备上的 float ,例如:
<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来自 css,这样他们就不会并排看。
我尝试做的是使用表格单元格而不是 div
就像:
<table>
<tr>
<td width="300" align="left" class="column">
<!-- content -->
</td>
<td width="300" align="left" class="column">
<!-- content -->
</td>
<tr>
</table>
保持相同的 CSS 类,但即使它解决了桌面客户端中的问题,它在 iOS 设备上并排显示(好像 display: block
没有应用到 td
s)
有人有想法吗?
最佳答案
您应该改用表格而不是 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 - 如何在响应式电子邮件模板中堆叠列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16869807/