Html 电子邮件模板设计

我正在使用电子邮件模板设计。我的问题是，如果你看到设计中有一个带有“P”的元素，在“P”的上方和下方有一条垂直的黑线，但问题是这条线没有与其他“P”线连接。白色背景部分的内容是动态的，所以我无法确定高度

我的问题是如何克服这个问题

请帮帮我。提前谢谢

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 23</h1>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" colspan="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-color:#E7EBED;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<table width="600" cellspacing="0" cellpadding="0" border="0" colspan="0" align="left" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px;  background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 4%;">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong>  </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px;  background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px;   margin-top: -48px;">&nbsp;</span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong>  </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>           
</tbody>
</table>    
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; margin-bottom:2px; font-weight:normal;">September 24</h1>
</td>
</tr>
</tbody>
</table>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 25</h1>
</td>
</tr>
</tbody>
</table>

九月二十三日
08:00

p

赛前由Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助
08:00

p

会前由Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助
九月二十四日
九月二十五日

设置属性以设置顶部和底部边框的样式。你可以使用下面的风格…希望它是你想要的

.className {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

---

设置属性以设置顶部和底部边框的样式。你可以使用下面的风格…希望它是你想要的

.className {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

找到这一个，尝试使用div而不是span，span不能容纳宽度和高度，如果使用div更好，div可以容纳高度，您可以使其占据整个空间，使其看起来连接，注意

---

找到这一个，尝试使用div而不是span，span不能容纳宽度和高度，如果使用div更好，div可以容纳高度，可以使其占据整个空间，使其看起来连接，注意

请查看设计

p

它有两个span元素，背景色为黑色，我希望这些元素与另一个相同的元素连接起来。请查看设计

p

它有两个背景色为黑色的span元素，我希望这些元素连接另一个相同的元素diffnet trI，并替换了span-to-div元素，但这里的问题是，我无法确定高度。它应该基于赛前的高度由Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助rocky，我发现了这个，@rocky这个答案有帮助吗？我已经替换了span to div元素，但这里的问题是，我无法确定高度。它应该基于赛前的高度由Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助Sphere Labs赞助rocky，我找到了这个，这个答案有帮助吗？