html – 在Outlook 2007,2010和2013中响应2列到1列电子邮件_html-js-css

概述我正在为移动设备优化 HTML电子邮件.我的任务是找到一个通用的解决方案来创建一个2列到1列的响应式布局.我发现了一篇由Campaign Monitor- http://www.campaignmonitor.com/guides/mobile/responsive/编写的文章.我已经尝试了他们的标记,它适用于大多数客户端和浏览器,但Outlook 2007,2010和2013除外.我已经提供了一我正在为移动设备优化 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%"  align="center" cellpadding="0" cellspacing="0">    <tbody>      <tr>        <td height="15"></td>      </tr>      <tr>        <td wIDth="100%">          <table wIDth="560"  align="center" cellpadding="0" cellspacing="0" >            <tbody>              <tr>                <td wIDth="100%">                  <table wIDth="280" align="left" cellpadding="0" cellspacing="0" >                    <tbody>                      <tr>                        <td wIDth="100%" height="40" >                          <div height="40" >left (top)</div>                        </td>                      </tr>                    </tbody>                  </table>                  <table wIDth="280" align="left" cellpadding="0" cellspacing="0" >                    <tbody>                      <tr>                        <td wIDth="100%" height="40" >                          <div height="40" >Right (bottom)</div>                        </td>                      </tr>                    </tbody>                  </table>                </td>              </tr>            </tbody>          </table>        </td>      </tr>      <tr>        <td height="15"></td>      </tr>    </tbody>  </table></body></HTML>

http://jsfiddle.net/bxdUp/

解决方法您是否尝试将align =“left”和align =“right”添加到堆叠表？

见更新小提琴：http://jsfiddle.net/bxdUp/1/

您当前拥有对齐=“左”的正确表,但我已成功使用Outlook表对齐 *** 作对齐值.

总结

以上是内存溢出为你收集整理的html – 在Outlook 2007,2010和2013中响应2列到1列电子邮件全部内容，希望文章能够帮你解决html – 在Outlook 2007,2010和2013中响应2列到1列电子邮件所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1139798.html