在下面的代码中,当第一列的值超过一行时(在本例中为标题为“一个超过一行的长值”的元素),该列不再与其他两个对齐:
<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>
我已经从不必要的标签中删除了代码。上面看到的代码位于一个单独的文件中,目前不是包含的代码段。
最佳答案
默认的垂直对齐方式是居中,但是你想要置顶:
tr {
vertical-align: top;
}
<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>
关于html - 多行文本值破坏布局的水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52277458/