我试图让按钮在列的底部对齐,文本顶部对齐。我已经进行了多次尝试,但下面我尝试了 valign="bottom" 和 Vertical-align:bottom;中间列上的 css 没有成功。向包含每列的主表(与类表)添加对齐会将表中的所有内容移至底部。任何帮助将不胜感激,谢谢!
<!-- START THREE COLUMNS -->
<tr>
<td style="padding: 30px 0 40px 0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="three-columns" style="padding:0;font-size:0;text-align: center;">
<!--[if mso]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="200" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
<tr>
<td class="padding" style="padding:15px;">
<table class="content" style="border-spacing:0;text-align: center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;">
<p style="font-size: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quisquam nostrum, reprehenderit consequatur odio sint sed, illo adipisci laudantium soluta animi tempora qui obcaecati maiores aut. Laboriosam esse expedita dolorum.</p>
</td>
</tr>
<tr>
<td align="center">
<table align="center" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:10px;" bgcolor="#fff">
<a href="https://example.com/14" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #000;background-color: #fff;padding:8px 20px;border: 1px solid #fff;border-radius: 10px;display: inline-block;">
Email Audience
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td><td width="200" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding:15px;">
<table class="content" style="border-spacing:0;text-align: center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;">
<p style="font-size: 15px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas explicabo iure praesentium obcaecati eaque? Quod, assumenda.</p>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: bottom;" valign="bottom">
<table align="center" role="presentation" style="border-spacing:0; vertical-align: bottom;" valign="bottom">
<tr>
<td align="center" style="border-radius:10px;vertical-align: bottom;" bgcolor="#000" valign="bottom">
<a href="https://example.com/16" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #000;padding:8px 20px;border: 1px solid #000;border-radius: 10px;display: inline-block;">
Second Button
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td><td width="200" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
<tr>
<td class="padding" style="padding:15px;">
<table class="content" style="border-spacing:0;text-align: center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;">
<p style="font-size: 15px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ipsum aspernatur neque odit dolorem molestias consequatur enim consectetur dicta ab rem provident deserunt expedita, id quas doloremque illo dignissimos! Blanditiis!</p>
</td>
</tr>
<tr>
<td align="center">
<table align="center" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:10px;" bgcolor="#fff">
<a href="https://example.com/18" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #000;background-color: #fff;padding:8px 20px;border: 1px solid #fff;border-radius: 10px;display: inline-block;">
Third Button
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- END THREE COLUMNS -->
为了实现响应能力,在电子邮件中执行 3 列的典型方法是将表格分开 - 正如您的工作中所示。因此,您无法使用垂直对齐来匹配它们,因为每个表都不知道其他表在做什么。
唯一的方法是手动添加空间,例如向
<td>
添加填充,例如:
<td align="center" style="padding-top:20px;border-radius:10px;" bgcolor="#000">
但是您可能需要查看移动设备需要什么填充,或者只为桌面添加此填充。
我更喜欢移动优先的方法,因为不接受
<style>
块的移动设备比不接受 <style>
块的台式机更多。
你可以这样做:
<style>
@media screen and (min-width:600px) {
.desktopPadding {
padding-top: 20px!important;
}
}
</style>
<td align="center" class="desktopPadding" style="padding:0;border-radius:10px;mso-padding-alt: 20px 0 0 0;" bgcolor="#000">
请注意 Outlook(Windows 桌面)代码
mso-padding-alt
,因为它不接受 @media
查询。
或者,您可以使用其他间距方法,例如
<p style="margin:20px 0 0 0;line-height:0;font-size:0;"> </p>