英文:
Bottom Align <td> within a table
问题
我正在尝试让按钮位于列的底部，并使文本顶部对齐。我尝试了多次，但下面我尝试了valign="bottom"和在中间列上使用vertical-align: bottom;的CSS，但没有成功。在包含每个列的主表上添加对齐会将表中的所有内容都移动到底部。感谢任何帮助！
<!-- 开始三列 -->
<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;">
<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;">
<table align="center" role="presentation" style="border-spacing:0; vertical-align: 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>
<!-- 结束三列 -->
英文:
I'm trying to get the buttons to line up at the bottom of the columns with the text being top aligned. I've had a number of attempts, but below I've attempted valign="bottom" and the vertical-align:bottom; css on the middle column without success. Adding alignment to the main table containing each column (with the class table) will shift all content within the table to the bottom. Any help would be appreciate, thanks!
<!-- 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 -->
答案1
得分: 1
为了实现响应式设计，电子邮件中创建三列的典型方法是将表格分开，就像您的工作中所示。因此，您不能使用vertical-align来匹配它们，因为每个表格不知道其他表格在做什么。
唯一的前进之路是手动添加空间，例如，对<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>。
英文:
In order to achieve responsiveness, the typical way to do 3 columns in email is to separate the tables - as shown in your work. Therefore, you can't match them using vertical-align, since each table doesn't know what the other tables are doing.
The only way forward is to add space manually, e.g. add padding to the <td>, e.g.:
<td align="center" style="padding-top:20px;border-radius:10px;" bgcolor="#000">
But then you may need to look at what padding you need for mobile, or only add this padding for desktop.
I prefer a mobile-first approach, as there are more mobiles that don't accept <style> blocks than desktops that don't accept <style> blocks.
You can do this:
<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">
Note the Outlook (Windows desktop) code mso-padding-alt, since it doesn't accept @media queries.
Alternatively, you can use other methods of spacing like <p style="margin:20px 0 0 0;line-height:0;font-size:0;">&nbsp;</p>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论