我正在为移动设备优化
HTML电子邮件.我的任务是找到一个通用的解决方案来创建一个2列到1列的响应式布局.我发现了一篇由Campaign Monitor-
http://www.campaignmonitor.com/guides/mobile/responsive/编写的文章.我已经尝试了他们的标记,它适用于大多数客户端和浏览器,但Outlook 2007,2010和2013除外.我已经提供了一个jsfiddle链接和我的标记供参考.有没有办法在这些版本的Outlook中使这个工作？
编辑：我不是试图使电子邮件的响应部分在Outlook中工作.我希望2个表(在jsfiddle示例中为Left& Right)显示彼此相邻而不是堆叠在彼此之上.这适用于Gmail(IE,FF,Chrome,Safari),AOL(IE,Yahoo(IE,Hotmail(IE,Apple Mail 4 &安培; 5,Outlook 2003,Android 4.0,iOS 4,5和& 6.我只关注Outlook 2007及更高版本的渲染引擎.
<html>
<head>
<style>
@media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
解决方法
您是否尝试将align =“left”和align =“right”添加到堆叠表？
见更新小提琴：http://jsfiddle.net/bxdUp/1/
您当前拥有对齐=“左”的正确表,但我已成功使用Outlook表对齐操作对齐值.
