【发布时间】：2018-09-11 13:46:48
【问题描述】：
在下面的代码中，当第一列的值超过一行时（在这种情况下是标题为“一个长值超过一行”的项），该列不再与其他两个对齐：
<table>
<tr >
<td valign="top" style="padding: 17px 19px 0; background-color: #ffffff; text-align: center;" >
<table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;" align="center">
<tr>
<td width="100%" align="center" style="padding: 17px 0 0;">
<h2 style="margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 25px; color: #E35E19; font-weight: 900;">Coming soon</h2>
</td>
</tr>
</table>
</td>
</tr>
<!-- 3 Even Columns : BEGIN -->
<tr>
<td valign="top" style="padding: 0 19px 17px; background-color: #ffffff; text-align: center;">
<table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;">
<tr>
<!-- Column : BEGIN -->
<td width="33.33%">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 22px 11px 0px; text-align: center" >
<img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
</td>
</tr>
<tr>
<td style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
<p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">a long value that exceeds one line</p>
<p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="33.33%">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 22px 11px 0px; text-align: center" >
<img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
</td>
</tr>
<tr>
<td style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
<p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
<p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="33.33%">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding: 22px 11px 0px; text-align: center" >
<img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
</td>
</tr>
<tr>
<td style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
<p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
<p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
</table>我已经从不必要的标签中删除了代码。上面看到的代码位于一个单独的文件中，目前不是包含的 sn-p。
【问题讨论】：
-
您真的应该使用类将
CSS与HTML分开。这将使代码更容易处理。此外，据我所知，sn-p 工作正常。 -
@kabanus 开发人员在电子邮件的开头和 HTML 标记中都分别使用了 CSS。我希望代码尽可能接近原始代码。
-
没问题，只是对阅读问题的任何人的一般性建议。
标签： html css html-email responsive