如何在Outlook 2007中制作响应式网格？ [英] How to make a responsive grid in Outlook 2007?
本文介绍了如何在Outlook 2007中制作响应式网格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码（对不起，我不能将我的所有代码放在超过30000个字符）
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>< / title>
< / head>
< body style =background：#ffffff>
< table cellpadding =0cellspacing =0border =0width =100％id =background_tablestyle =background：#ffffff>
< tr>
< td align =center>
< table width =615border =0cellpadding =0cellspacing =0id =main_contentstyle =background：#ffffff>
< tr>
< td align =center>
< table border =0cellspacing =0cellpadding =0id =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.jpgalt =width =602height =89border =0class =width320 topstyle =display：block />< / A>< / TD>
< / tr>
< tr>
< td align =center>< img src =http://www.emailtest.net/EmailTemplate/images/Banner.pngwidth =602height =321border = 0style =display：blockclass =width320 banner/>< / td>
< / tr>
< tr class =hide>
< td align =centerclass =hide>& nbsp;< / td>
< / tr>
< tr>
< td align =center><！ - #content_rows的结尾 - >
< / td>
< / tr>
< tr>
< td align =center>< table width =566border =0cellspacing =0cellpadding =0class =width280
< tr>
< td align =center>
< table width =276border =0cellspacing =0cellpadding =0style =display：inline-block; float：left;类= width320 >
< tr>
< td width =361>< table width =156border =0cellspacing =0cellpadding =0
< tr>
< td align =center>< table width =100％height =19border =0cellpadding =0cellspacing =0class =width320>
< tr bgcolor =＃e4e4e4>
< td width =10>< / td>
< td>< table width =100％border =0cellspacing =0cellpadding =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！ ;>欢迎来到最新的通讯。 < Strong>点击下载图片< / Strong>或< strong>点击上面的链接，在您的浏览器中查看< / strong>并查看< strong>加上更多...< / 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 =centerheight =10>< / td>
< / tr>
< tr class =width280>
< td align =center>< table width =276border =0cellspacing =0cellpadding =0class =width280style =margin-bottom：20px >
< tr>
< td width =134>< a href =http://www.emailtest.net/>< img src =http://www.emailtest.net/EmailTemplate /images/freedel.jpgwidth =134height =131border =0style =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.jpgwidth =135height =133border =0style =display：block/>< / a>< / td>
< / tr>
< / table>< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
< table width =277border =0cellspacing =0cellpadding =0style =display：inline-block; float：right; class =width280 mobfloat>
< tr>
< td width =277valign =topalign =rightclass =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.jpgwidth =267height =280border =0style =display：block; float：right; class =bargainalign =top/>< / a>
< / td>
< / tr>
< / table>< / td>
< / tr>
< / table>< / td>
< / tr>
< tr>< td height =20>< / td>< / tr>
< tr>
< td align =center>
< table width =560border =0cellspacing =0cellpadding =0class =width280align =center>
< tr>
< td align =center>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; class =products>
< tr class =products>
< td width =178style =padding：10px; border：1px solid #cccccc; class =products>< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr class =products>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_11_16_12_56_24_45772.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr class =products>
< td align =centerclass =products>< span style =font-family：Arial，Helvetica，sans-serif; font-size：12px; color：＃666666> < br />
产品
< 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.jpgalt =立即购买width =178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; margin-left：4px;类= 产品 >
< tr>
< td width =178style =padding：10px; border：1px solid #cccccc; class =productsalign =center>
< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2013_02_21_09_49_58_44302.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr>
< td align =centerclass =producttext>
< span style =font-family：Arial，Helvetica，sans-serif; font-size：12px; color：＃666666>< br />
产品< 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.jpgalt =立即购买width =178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; margin-left：4pxclass =products >
< tr>
< td width =178style =padding：10px; border：1px solid #cccccc;类= 产品 >
< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2013_02_21_09_38_07_98337.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr>
< td align =centerclass =producttext>
< span style =font-family：Arial，Helvetica，sans-serif; font-size：12px; color：＃666666>< br />
产品< br />
< strong>< span style =font-size：14px; color：＃000000;>& pound; 12.50< / span>< / strong>< br />
< strong>< span style =font-size：10px; color：＃ff0000;> WAS&磅; 49.99 SAVE£32.49< / span>< / strong>< /跨度>< / TD>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td height =50>< img src =http://www.emailtest.net/EmailTemplate/images/BuyNow.jpgalt =立即购买width =178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< div style =height：230px; float：left;类= 移动间隙 >< / DIV>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left;类= 产品 >
< tr class =products>
< td width =178style =padding：10px; border：1px solid #cccccc; class =products>< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr class =products>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_21_33_85391.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr class =products>
< td align =centerclass =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&磅; 39.99 SAVE£32.49< / span>< / strong>< /跨度>< / TD>
< / tr>
< / table>
< / td>
< / tr>
< tr class =products>
< td class =productsheight =50>< img src =http://www.emailtest.net/EmailTemplate/images/BuyNow.jpgalt =立即购买宽度=178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; margin-left：4pxclass =products >
< tr>
< td width =178style =padding：10px; border：1px solid #cccccc; class =productsalign =center>
< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_20_51_63544.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr>
< td align =centerclass =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&磅; 39.99 SAVE£32.49< / span>< / strong>< /跨度>< / TD>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td height =50>< img src =http://www.emailtest.net/EmailTemplate/images/BuyNow.jpgalt =立即购买width =178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; margin-left：4pxclass =products >
< tr>
< td width =178style =padding：10px; border：1px solid #cccccc; class =products>< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_12_01_08_22_08_25416.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr>
< td align =centerclass =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&磅; 39.99 SAVE£32.49< / span>< / strong>< /跨度>< / TD>
< / tr>
< / table>
< / td>
< / tr>
< tr>
< td height =50>< img src =http://www.emailtest.net/EmailTemplate/images/BuyNow.jpgalt =立即购买width =178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：剩下;类= 产品 >
< tr class =products>
< td width =178style =padding：10px; border：1px solid #cccccc; class =products>< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr class =products>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_03_13_62953.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr class =products>
< td align =centerclass =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 =productsheight =50>< img src =http://www.emailtest.net/EmailTemplate/images/BuyNow.jpgalt =立即购买宽度=178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; margin-left：4pxclass =products >
< tr>
< td width =178style =padding：10px; border：1px solid #cccccc; class =productsalign =center>
< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_03_58_76474.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr>
< td align =centerclass =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.jpgalt =立即购买width =178height =33border =0class =buynowstyle =display：block/>< / td>
< / tr>
< / table>
< table width =178border =0cellspacing =0cellpadding =0style =display：inline-block; float：left; margin-left：4pxclass =products >
< tr>
< td width =178style =padding：10px; border：1px solid #cccccc; class =products>< table width =156border =0cellspacing =0cellpadding =0class =products>
< tr>
< td style =border-bottom：1px solid #cccccc; class =productsalign =center>< img src =http://www.emailtest.net/uploads/images/m/fm_2011_06_29_03_05_17_24091.jpgwidth =156height =217border = 0class =productimagestyle =display：block/>< / td>
< / tr>
< tr>
< td align =centerclass =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.jpgalt =立即购买width =178height =33border =0class =buynowstyle =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.jpgalt =如何搜索width =602height = 182border =0class =width320 searchstyle =display：block/>< / td>
< / tr>
< tr>
< td>< img src =http://www.emailtest.net/EmailTemplate/images/footer.jpgalt =width =602height =190 border =0class =width320 footerstyle =display：block/>< / td>
< / tr>
< tr>
< td align =center>
< table width =560border =0cellpadding =0cellspacing =0id =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>
解决方案
Outlook 2007+ doesn’t support floating elements
In the above code, each grid element is an HTML table with the following inline styles:
float:left;
display:inline-block;
Email reader support
floatisn’t supported by Outlook 2007+, Gmaildisplayisn’t supported by Outlook 2007+
Layout options
Non-responsive layout
- Put each grid element in a separate table cell.
Responsive layout
- Put each grid element in the same table cell (which they currently are), and add
align=\"left\"to each grid element.
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>
I tested this with some success in Outlook 2007/2010/2013 using Litmus.
I'm creating a 3x3 grid layout in an email, which I have done with tables. I have also made it mobile responsive so that when viewed on a mobile, the grid resizes to 2x2. This all works fine but for some reason on Outlook 2007 onwards it displays the grid so it shows them one under another. I know Outlook has its restrictions but does anybody know a way round this? I've been staring at my code for ages.
Here's my code (sorry I can't put all my code on as its longer than 30000 characters)
<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"> </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"> </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;">£14.00</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£14.00</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£12.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£7.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£7.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£7.50</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£9.99</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£9.99</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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;">£9.99</span></strong><br />
<strong><span style="font-size:10px; color:#ff0000;">WAS £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> </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>
解决方案
Outlook 2007+ doesn't support floating elements
In the above code, each grid element is an HTML table with the following inline styles:
float:left;
display:inline-block;
Email reader support
floatisn't supported by Outlook 2007+, Gmaildisplayisn't supported by Outlook 2007+
Layout options
Non-responsive layout
- Put each grid element in a separate table cell.
Responsive layout
- Put each grid element in the same table cell (which they currently are), and add
align="left"to each grid element.
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>
I tested this with some success in Outlook 2007/2010/2013 using Litmus.
这篇关于如何在Outlook 2007中制作响应式网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
