我创建了一封 HTML 电子邮件，当在网络浏览器上的 Gmail 和 Android 应用程序 (Gmail) 上查看时，该电子邮件具有特定的布局问题。到目前为止，我一直无法追踪到有问题的代码，并且无法理解为什么 Gmail 在某个点之后将 HTML 电子邮件分成两部分，并将内容放在看似独立的两列中。
如果有人可以帮助提出解决方案或问题的原因，以及可能的解决方案，我们将不胜感激。
可在此处查看 HTML:
https://jsfiddle.net/59bd2z0L/
这里的问题截图(Gmail 网络浏览器):
这里的问题截图(Gmail Android App):
源 HTML 在这里:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
map area {outline:none;}
</style>
<title>Lorem Ipsum</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<font style="font-size:13px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">Header goes here Lorem ipsum dolor sit amet, consectetur.<media><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a style="color:#000000;" href="&&&">click here</a>.</font><br /><br />
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><a style="color:#000000;" href="">Lorem Ipsum</a></font><br />
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%"><tr><td></td><td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>
<!-- Image Section -->
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/gold-te-header.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a></center>
<!-- End Image Section -->
<!-- Image Section -->
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-logo.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a></center>
<!-- End Image Section -->
</td></tr>
<tr><td height="10" style="font-size: 1px; line-height: 10px;"> </td></tr>
<!-- Menu Section -->
<tr><td><center><table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-top.jpg" width="100%" style="max-width:121px;" alt="Women" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-top.jpg" width="100%" style="max-width:81px;" alt="Men" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-top.jpg" width="100%" style="max-width:116px;" alt="Unisex" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-top.jpg" width="100%" style="max-width:165px;" alt="Footwear" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/clear-top.jpg" width="100%" style="max-width:157px;" alt="Clearance" border="0" /></a></td>
</tr></table></center></td></tr>
<!-- End Menu Section -->
<tr><td height="10" style="font-size: 1px; line-height: 10px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork1.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork2.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork3.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Large Live Text Section -->
<tr><td>
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Size 19 Live text:</strong> et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque deserunt mollitia animi, id est laborum.</strong>
</font>
</center>
</td></tr>
<!-- End Large Live Text Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork4cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork5.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork6cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td></tr>
<!-- End Image Section -->
<tr><td height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- Letter Text Section -->
<tr><td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="3%"></td><td width="94%">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td><td width="3%"></td></tr></table>
</td></tr>
<!-- End Letter Text Section -->
<tr><td height="30" style="font-size: 1px; line-height: 30px;"> </td></tr>
<!-- Grey Background Section -->
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<tr><td bgcolor="#eff0f2">
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Lorem ipsum dolor sit amet, consectetur</strong><br /><br /><br />
</font>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Lorem ipsum dolor sit amet, consectetur.
</font>
</center>
</td></tr>
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td></tr>
<!-- End Grey Background Section -->
<tr><td height="30" style="font-size: 1px; line-height: 30px;"> </td></tr>
<!-- Double Banner -->
<tr><td><center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/email-ecat.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-banner-r.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a></center></td></tr>
<!-- End Double Banner -->
<!-- USP Section -->
<tr><td><center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-locator.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-size.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-care.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-returns.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a></center></td></tr>
<!-- End USP Section -->
<!-- Social Section -->
<tr><td><center><table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-fbook.jpg" width="100%" style="max-width:196px;" alt="Facebook" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-pin.jpg" width="100%" style="max-width:78px;" alt="Pinterest" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-twi.jpg" width="100%" style="max-width:77px;" alt="Twitter" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-google.jpg" width="100%" style="max-width:96px;" alt="Google+" border="0" /></a></td>
<td><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-blog.jpg" width="100%" style="max-width:192px;" alt="Blog" border="0" /></a></td>
</tr></table></center></td></tr>
<!-- End Social Section -->
<!-- Bottom Menu -->
<tr><td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-viewmore.jpg" width="100%" style="max-width:639px;" alt="View More" /></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-bot.jpg" width="100%" style="max-width:639px;" alt="Women" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-bot.jpg" width="100%" style="max-width:639px;" alt="Men" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-bot.jpg" width="100%" style="max-width:639px;" alt="Unisex" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-bot.jpg" width="100%" style="max-width:639px;" alt="Footwear" border="0" /></a></center>
</td></tr>
<tr><td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-security.jpg" width="100%" style="max-width:639px;" alt="Clearance" border="0" /></a></center>
</td></tr>
<!-- End Bottom Menu -->
<!-- Security Banners -->
<tr><td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-1.jpg" width="100%" style="max-width:639px;" alt="Security" /></center>
</td></tr>
<!-- End Security Banners -->
<!-- T&Cs -->
<tr><td>
<center>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td></tr>
<!-- End T&Cs -->
</table>
</td><td></td></tr></table>
</center>
</body>
</html>
最佳答案
您的代码中存在许多 HTML 标记放置错误。这是更正后的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
map area {
outline: none;
}
</style>
<title>Lorem Ipsum</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<font style="font-size:13px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">Header goes here Lorem ipsum dolor sit amet, consectetur.<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a style="color:#000000;" href="&&&">click here</a>.
</font>
<br />
<br />
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><a style="color:#000000;" href="">Lorem Ipsum</a></font>
<br />
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- Image Section -->
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/gold-te-header.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a>
</center>
<!-- End Image Section -->
<!-- Image Section -->
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-logo.jpg" width="100%" style="max-width:500px;" alt="" border="0" /></a>
</center>
<!-- End Image Section -->
</td>
</tr>
<tr>
<td height="10" style="font-size: 1px; line-height: 10px;"> </td>
</tr>
<!-- Menu Section -->
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-top.jpg" width="100%" style="max-width:121px;" alt="Women" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-top.jpg" width="100%" style="max-width:81px;" alt="Men" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-top.jpg" width="100%" style="max-width:116px;" alt="Unisex" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-top.jpg" width="100%" style="max-width:165px;" alt="Footwear" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/clear-top.jpg" width="100%" style="max-width:157px;" alt="Clearance" border="0" /></a>
</td>
</tr>
</table>
</center>
</td>
</tr>
<!-- End Menu Section -->
<tr>
<td height="10" style="font-size: 1px; line-height: 10px;"> </td>
</tr>
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork1.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork2.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork3.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Large Live Text Section -->
<tr>
<td>
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Size 19 Live text:</strong> et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque deserunt mollitia animi, id est laborum.
</font>
</center>
</td>
</tr>
<!-- End Large Live Text Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork4cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork5.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<!-- Image Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-artwork6cta.jpg" width="100%" style="max-width:640px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Image Section -->
<tr>
<td height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- Letter Text Section -->
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%"></td>
<td width="94%">
<font style="font-size:16px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</td>
<td width="3%"></td>
</tr>
</table>
</center>
</td>
</tr>
<!-- End Letter Text Section -->
<tr>
<td height="30" style="font-size: 1px; line-height: 30px;"> </td>
</tr>
<!-- Grey Background Section -->
<tr>
<td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<tr>
<td bgcolor="#eff0f2">
<center>
<font style="font-size:19px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
<strong>Lorem ipsum dolor sit amet, consectetur</strong><br /><br /><br />
</font>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;">
Lorem ipsum dolor sit amet, consectetur.
</font>
</center>
</td>
</tr>
<tr>
<td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;"> </td>
</tr>
<!-- End Grey Background Section -->
<tr>
<td height="30" style="font-size: 1px; line-height: 30px;"> </td>
</tr>
<!-- Double Banner -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/email-ecat.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-banner-r.jpg" width="100%" style="max-width:320px;" alt="Header goes here using promotional code <media>" border="0" /></a></center>
</td>
</tr>
<!-- End Double Banner -->
<!-- USP Section -->
<tr>
<td>
<center><a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-locator.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-size.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-care.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-returns.jpg" width="100%" style="max-width:280px;" alt="Header goes here using promotional code <media>" border="0" /></a>
</center>
</td>
</tr>
<!-- End USP Section -->
<!-- Social Section -->
<tr>
<td>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-fbook.jpg" width="100%" style="max-width:196px;" alt="Facebook" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-pin.jpg" width="100%" style="max-width:78px;" alt="Pinterest" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-twi.jpg" width="100%" style="max-width:77px;" alt="Twitter" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-google.jpg" width="100%" style="max-width:96px;" alt="Google+" border="0" /></a>
</td>
<td>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-blog.jpg" width="100%" style="max-width:192px;" alt="Blog" border="0" /></a>
</td>
</tr>
</table>
</center>
</td>
</tr>
<!-- End Social Section -->
<!-- Bottom Menu -->
<tr>
<td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-viewmore.jpg" width="100%" style="max-width:639px;" alt="View More" /></center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-women-bot.jpg" width="100%" style="max-width:639px;" alt="Women" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-men-bot.jpg" width="100%" style="max-width:639px;" alt="Men" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-uni-bot.jpg" width="100%" style="max-width:639px;" alt="Unisex" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-foot-bot.jpg" width="100%" style="max-width:639px;" alt="Footwear" border="0" /></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href=""><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-security.jpg" width="100%" style="max-width:639px;" alt="Clearance" border="0" /></a>
</center>
</td>
</tr>
<!-- End Bottom Menu -->
<!-- Security Banners -->
<tr>
<td>
<center><img src="http://e76511c942b88eacf86b-059234da599e889c40c5d41b924fda9f.r7.cf3.rackcdn.com/responsive-email-1.jpg" width="100%" style="max-width:639px;" alt="Security" /></center>
</td>
</tr>
<!-- End Security Banners -->
<!-- T&Cs -->
<tr>
<td>
<center>
<font style="font-size:12px; color:#000000; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:none;"><br /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
</font>
</center>
</td>
</tr>
<!-- End T&Cs -->
</table>
</td>
<td></td>
</tr>
</table>
</center>
</body>
</html>使用它并告诉我它是否有效:)
关于Gmail 中的 HTML 电子邮件液体布局中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43186231/