表格内底部对齐<td>

问题描述 投票:0回答:1

我试图让按钮在列的底部对齐,文本顶部对齐。我已经进行了多次尝试,但下面我尝试了 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 -->
html html-email
1个回答
0
投票

为了实现响应能力,在电子邮件中执行 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;">&nbsp;</p>

© www.soinside.com 2019 - 2024. All rights reserved.