个人中心
gpt4 book ai didi

Gmail 中的 HTML 电子邮件液体布局中断

转载 作者：太空宇宙 更新时间：2023-11-04 08:54:49 27 4
gpt4 key购买 nike

我创建了一封 HTML 电子邮件，当在网络浏览器上的 Gmail 和 Android 应用程序 (Gmail) 上查看时，该电子邮件具有特定的布局问题。到目前为止，我一直无法追踪到有问题的代码，并且无法理解为什么 Gmail 在某个点之后将 HTML 电子邮件分成两部分，并将内容放在看似独立的两列中。

如果有人可以帮助提出解决方案或问题的原因，以及可能的解决方案，我们将不胜感激。

可在此处查看 HTML:

https://jsfiddle.net/59bd2z0L/

这里的问题截图(Gmail 网络浏览器):

enter image description here

这里的问题截图(Gmail Android App):

enter image description here

源 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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td></tr>

<!-- Grey Background Section -->
<tr><td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;">&nbsp;</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;">&nbsp;</td></tr>
<!-- End Grey Background Section -->

<tr><td height="30" style="font-size: 1px; line-height: 30px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
            </tr>

            <!-- Grey Background Section -->
            <tr>
              <td bgcolor="#eff0f2" height="20" style="font-size: 1px; line-height: 20px;">&nbsp;</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;">&nbsp;</td>
            </tr>
            <!-- End Grey Background Section -->

            <tr>
              <td height="30" style="font-size: 1px; line-height: 30px;">&nbsp;</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/

27 4 0
文章推荐： java - 如何获取用户界面:param value in Javabean
文章推荐： c - 客户端 select() 的替代方法
文章推荐： c++ - 链表结构推送和弹出
文章推荐： c - 如何跟踪这个堆栈和指针
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com