我该如何让这个元素出现在代码中？

我是制作一封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 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>

但地址栏确实出现了正确格式，如果我移动它上面有绿色和橙色盒子，

<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>

我不知道为什么，这正在发生，我如何更改代码以使地址出现在绿色和橙色框下方，但与上面的其他元素保持相同的宽度？

来源

2017-07-01 Naman Shah

将地址行移动到取消链接/社交媒体链接表并将其设为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>

来源

2017-07-01 19:05:06

谢谢！现在它工作正常。 –

需要注意的是：colspan不适用于一些电子邮件客户端。 – Syfer

你的代码中有一些错误：你在值中使用没有散列的颜色，你的表结构对你对代码的添加是错误的（表不能放在tr中）。当给出答案时，试着改进这个人的代码，以便将来他们很容易，所以他们不会犯同样的错误。 – Syfer

我该如何让这个元素出现在代码中？

回答

相关问题