如何在此代码中显示此元素？

时间：2017-07-01 18:52:49

标签： css html5 xhtml html-email

我正在制作一封HTML电子邮件，我的大部分元素都应该按原样显示。但由于某种原因，我试图插入一个元素，一个带有地址和联系人的小方框不会显示出来。Screencap of file

底部带有地址的灰色条应显示与主白框相同的宽度，并且应该用蓝色包围。

我的代码是：

<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BigParser</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body style="margin: 0; padding: 0;">
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <!--main background color, size, etc.-->
      <tr bgcolor= "#21A1EC">
        <td align="center" style="padding: 40px 0 30px 0;">
          <!--this BigParser logo at the top-->
          <img src="bigparser.gif" width="186" height="43" style="display:block;" />
        </td>
      </tr>
      <tr bgcolor= "#21A1EC">
        <td align="center">
          <table border="1" cellpadding="0" cellspacing="0" width="600">
            <!--creates main padded content table-->
            <tr width=100% bgcolor= "#ffffff">
              <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
                <!--title formatting-->
                Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
              </td>
            </tr>
            <tr width="100%" bgcolor= "#ffffff">
              <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
                <!--content formatting-->
                content text
              </td>
            </tr>
            <tr>
              <!--this is the unsub/links box, contains the unsubscribe and links to social media-->
              <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
                <tr align="center" >
                  <!--this contains unsub link and copyright-->
                  <td bgcolor="50B54D" width="60%">
                    unsub link
                  </td>
                  <td bgcolor="EC552B" width="40%">
                    social media links
                  </td>
                </tr>
              </table>
            </tr>
            <tr bgcolor="EEEFF1" align="left" style="font-size:15;">
              <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
                BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

但是，如果我将地址栏移到绿色和橙色框的上方，地址栏看似格式正确，HTML works when address is above 

<table border="1" cellpadding="0" cellspacing="0" width="600">
            <!--creates main padded content table-->
            <tr width=100% bgcolor= "#ffffff">
              <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
                <!--title formatting-->
                Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
              </td>
            </tr>
            <tr width="100%" bgcolor= "#ffffff">
              <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
                <!--content formatting-->
                content text
              </td>
            </tr>
            <tr bgcolor="EEEFF1" align="left" style="font-size:15;">
              <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
                BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
              </td>
            </tr>
            <tr>
              <!--this is the unsub/links box, contains the unsubscribe and links to social media-->
              <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
                <tr align="center" >
                  <!--this contains unsub link and copyright-->
                  <td bgcolor="50B54D" width="60%">
                    unsub link
                  </td>
                  <td bgcolor="EC552B" width="40%">
                    social media links
                  </td>
                </tr>
              </table>
            </tr>          
          </table>

我不确定为什么会发生这种情况，如何更改代码以使地址显示在绿色和橙色框下方，但保持与其上方其余元素相同的宽度？

1 个答案:

答案 0 :(得分：2)

将地址行移至unsub链接/社交媒体链接表并创建其colspan="2"。我希望这就是你要求的 

<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>BigParser</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="margin: 0; padding: 0;">
  <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <!--main background color, size, etc.-->
    <tr bgcolor="#21A1EC">
      <td align="center" style="padding: 40px 0 30px 0;">
        <!--this BigParser logo at the top-->
        <img src="bigparser.gif" width="186" height="43" style="display:block;" />
      </td>
    </tr>
    <tr bgcolor="#21A1EC">
      <td align="center">
        <table border="1" cellpadding="0" cellspacing="0" width="600">
          <!--creates main padded content table-->
          <tr width=100% bgcolor="#ffffff">
            <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
              <!--title formatting-->
              Lorem ipsum
              <!--do not delete-->&nbsp&nbsp&nbsp&nbsp
              <!-- centering title fix-->
            </td>
          </tr>
          <tr width="100%" bgcolor="#ffffff">
            <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
              <!--content formatting-->
              content text
            </td>
          </tr>
          <tr>
          <td align="left" valign="top">
            <!--this is the unsub/links box, contains the unsubscribe and links to social media-->
            <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
              <tr align="center">
                <!--this contains unsub link and copyright-->
                <td bgcolor="#50B54D" width="60%">
                  unsub link
                </td>
                <td bgcolor="#EC552B" width="40%">
                  social media links
                </td>
              </tr>
              <tr bgcolor="#EEEFF1" align="left" style="font-size:15;">
            <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2">
              BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
            </td>
          </tr>
            </table>
            </td>
          </tr>

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

</html>

相关问题
最新问题