如何在Outlook 2007中创建响应式网格？

时间：2013-04-24 14:56:57

标签： html email responsive-design html-email outlook-2010

我正在电子邮件中创建一个3x3网格布局，我已经用表格完成了。我还使其具有移动响应性，以便在移动设备上查看时，网格会调整为2x2。这一切都运行正常，但出于某种原因，在Outlook 2007之后它显示网格，因此它显示一个在另一个下面。我知道Outlook有它的限制，但有人知道这方面的方法吗？我一直盯着我的代码。

这是我的代码（抱歉，我不能将所有代码都放在30000以上的字符上）

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>


</head>
<body style="background:#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="background_table" style="background:#ffffff">

    <tr>
        <td align="center">
            <table width="615" border="0" cellpadding="0" cellspacing="0" id="main_content" style="background:#ffffff">
              <tr>
                <td align="center">
                    <table border="0" cellspacing="0" cellpadding="0" id="inner_content">
                      <tr>
                        <td align="center"><a href="http://www.emailtest.net/?utm_source=email&utm_medium=email&utm_campaign=13_03_CG_EmailTemplate"><img src="http://www.emailtest.net/EmailTemplate/images/Top.jpg" alt="" width="602" height="89" border="0" class="width320 top" style="display:block"/></a></td>
                      </tr>
                      <tr>
                        <td align="center"><img src="http://www.emailtest.net/EmailTemplate/images/Banner.png" width="602" height="321" border="0"  style="display:block" class="width320 banner"/></td>
                      </tr>
                      <tr class="hide">
                        <td align="center" class="hide">&nbsp;</td>
                      </tr>
                      <tr>
                        <td align="center"><!-- End of #content_rows -->
                        </td>
                      </tr>
                      <tr>
                        <td align="center"><table width="566" border="0" cellspacing="0" cellpadding="0" class="width280">
                          <tr>
                            <td align="center">

                             <table width="276" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class="width320">
                                          <tr >
                                            <td width="361" ><table width="156" border="0" cellspacing="0" cellpadding="0" >
                                              <tr >
                                                <td align="center"><table width="100%" height="19" border="0" cellpadding="0" cellspacing="0" class="width320">
                                                  <tr bgcolor="#e4e4e4">
                                                    <td width="10"></td>
                                                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                      <tr>
                                                        <td height="10"></td>
                                                      </tr>
                                                      <tr>
                                                        <td align="left"><span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#33363e; line-height:16px !important;">Welcome to the latest  enewsletter. <Strong>Click to download pictures</Strong> or <strong>click on the link above to view it in your browser</strong> and view such offers as <strong>plus much more...</strong></span></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="10"></td>
                                                      </tr>
                                                    </table></td>
                                                    <td width="10"></td>
                                                  </tr>
                                                </table></td>
                                              </tr>
                                              <tr class="width280">
                                                <td align="center"  height="10"></td>
                                              </tr>
                                              <tr class="width280">
                                                <td align="center" ><table width="276" border="0" cellspacing="0" cellpadding="0" class="width280" style="margin-bottom:20px">
                                                  <tr>
                                                    <td width="134"><a href="http://www.emailtest.net/"><img src="http://www.emailtest.net/EmailTemplate/images/freedel.jpg" width="134" height="131" border="0" style="display:block"/></a></td>
                                                    <td width="8">&nbsp;</td>
                                                    <td width="134"><a href="http://www.emailtest.net/"><img src="http://www.emailtest.net/EmailTemplate/images/tiger.jpg" width="135" height="133" border="0" style="display:block"/></a></td>
                                                  </tr>
                                                </table></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>

                                        </table>
                             <table width="277" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:right;" class="width280 mobfloat" >
                                         <tr>
                                            <td width="277" valign="top" align="right" class="mobalign">
                                            <a href="http://www.emailtest.net/special-offers/?utm_source=email&utm_medium=email&utm_campaign=13_03_CG_EmailTemplate"><img src="http://www.emailtest.net/EmailTemplate/images/bargain.jpg" width="267" height="280" border="0" style="display:block; float:right;" class="bargain" align="top"/></a>

                                            </td>
                               </tr>

                              </table></td>


                          </tr>
                        </table></td>
                      </tr>

                      <tr><td height="20"></td></tr>



                      <tr>
                        <td align="center">
                      <table width="560" border="0" cellspacing="0" cellpadding="0" class="width280" align="center">
                                      <tr>
                                        <td align="center" >
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class=" products">
                                          <tr class="products">
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class=" products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr class=" products">
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center"><img src="http://www.emailtest.net/uploads/images/m/fm_2011_11_16_12_56_24_45772.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr class="products">
                                                <td align="center" class="products"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666"><br />
                                                Product
<br />
<strong><span style="font-size:14px; color:#000000;">&pound;14.00</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS &pound;50 SAVE £36</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr class="products">
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px;" class="products">
                                          <tr>
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products" align="center">
                                            <table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr>
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2013_02_21_09_49_58_44302.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr>
                                                <td align="center" class="producttext">
                                                  <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666"><br />
                                                  Product<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;14.00</span></strong><br />
                                                  <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;50 SAVE £36</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
                                          <tr>
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products">
                                            <table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr>
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2013_02_21_09_38_07_98337.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr>
                                                <td align="center" class="producttext">
                                                  <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666"><br />
                                                  Product<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;12.50</span></strong><br />
                                                  <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;49.99 SAVE £32.49</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <div style="height:230px; float:left;" class="mobile-gap"></div>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class="products">
                                          <tr class="products">
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr class="products">
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_21_33_85391.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr class="products">
                                                <td align="center" class="products"><br /><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;7.50</span></strong><br />
                                                <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;39.99 SAVE £32.49</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>

                                          </tr>





                                          <tr class="products">
                                            <td class="products" height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
                                          <tr>
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products" align="center">
                                            <table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr>
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_20_51_63544.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr>
                                                <td align="center" class="producttext"><br />
                                                  <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;7.50</span></strong><br />
                                                <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;39.99 SAVE £32.49</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
                                          <tr>
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr>
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_22_08_25416.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr>
                                                <td align="center" class="producttext"><br />
                                                  <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;7.50</span></strong><br />
                                                <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;39.99 SAVE £32.49</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>

                                        </table>



                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left;" class="products">
                                          <tr class="products">
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr class="products">
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_03_13_62953.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr class="products">
                                                <td align="center" class="products"><br />
                                                <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">Product<br />
                                                <strong><span style="font-size:14px; color:#000000;">&pound;9.99</span></strong><br />
                                                <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;44.99 SAVE £35</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr class="products">
                                            <td class="products" height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
                                          <tr>
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products" align="center">
                                            <table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr>
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_03_58_76474.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr>
                                                <td align="center" class="producttext"><br />
                                                  <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">products<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;9.99</span></strong><br />
                                                <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;44.99 SAVE £35</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>
                                        </table>
                                        <table width="178" border="0" cellspacing="0" cellpadding="0" style="display:inline-block; float:left; margin-left:4px" class="products">
                                          <tr>
                                            <td width="178" style="padding:10px; border:1px solid #cccccc;" class="products"><table width="156" border="0" cellspacing="0" cellpadding="0" class="products">
                                              <tr>
                                                <td style="border-bottom:1px solid #cccccc;" class="products" align="center" ><img src="http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_05_17_24091.jpg" width="156" height="217" border="0"  class="productimage" style="display:block"/></td>
                                              </tr>
                                              <tr>
                                                <td align="center" class="producttext"><br />
                                                  <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666">products<br />
                                                  <strong><span style="font-size:14px; color:#000000;">&pound;9.99</span></strong><br />
                                                <strong><span style="font-size:10px; color:#ff0000;">WAS &pound;44.99 SAVE £35</span></strong></span></td>
                                              </tr>
                                            </table>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="50"><img src="http://www.emailtest.net/EmailTemplate/images/BuyNow.jpg" alt="Buy Now" width="178" height="33" border="0" class="buynow" style="display:block" /></td>
                                          </tr>








                                        </table>

                                        </td>
                                      </tr>
                          </table>
                        </td>
                      </tr>
                      <tr>

                        <td>&nbsp;</td>
                      </tr>


                       <tr>

                            <td><img src="http://www.emailtest.net/EmailTemplate/images/search_banner.jpg" alt="How to search" width="602" height="182" border="0" class="width320 search" style="display:block"/></td>
                      </tr>

                       <tr>

                            <td><img src="http://www.emailtest.net/EmailTemplate/images/footer.jpg" alt="" width="602" height="190" border="0" class="width320 footer" style="display:block" /></td>
                      </tr>


                      <tr>
                        <td align="center">
                        <table width="560" border="0" cellpadding="0" cellspacing="0" id="content_rows">
                              <tr>
                                <td align="left">
                               <p><br />
                                 <br />
                                 <br /><br />
                                 </p>
                                </td>
                              </tr>
                            </table><!-- End of #content_rows -->
                        </td>
                      </tr>
                    </table><!-- End of #inner_content -->
                </td>
              </tr>
            </table><!-- End of #main_content --> 
        </td>
    </tr>
</table> <!-- End of #background_table --> 

</body>
</html>

1 个答案:

答案 0 :(得分：1)

Outlook 2007+不支持浮动元素

在上面的代码中，每个网格元素都是一个HTML表，其中包含以下内联样式：

float:left;
display:inline-block;

电子邮件阅读器支持

    Outlook 2007 +，Gmail 不支持
  • float Outlook 2007 +
    • 不支持
  • display

布局选项

无响应布局

  • 将每个网格元素放在一个单独的表格单元格中。

响应式布局

  • 将每个网格元素放在同一个表格单元格中（它们当前是），并将align="left"添加到每个网格元素。

<强> HTML 

<table width="560" align="center">
    <tr>
        <td align="center">

            <!-- Each grid element -->
            <table width="178" align="left">...</table>
            <table width="178" align="left">...</table>
            <table width="178" align="left">...</table>
        </td>
    </tr>
</table>

我使用Litmus在Outlook 2007/2010/2013中测试了一些成功。

相关问题
最新问题