在一封单元格电子邮件中对齐顶部和底部答案

【问题标题】：Align top and bottom in one cell email在一封单元格电子邮件中对齐顶部和底部
【发布时间】：2022-02-16 06:19:54
【问题描述】：

所以，正如标题所说，我使用表格制作了一个两行电子邮件模板，并且我有一个按钮需要位于行容器的底部，问题是我需要使用垂直对齐单元格顶部按钮所在的位置。也禁止使用负边距、弹性框、绝对定位，因为它在电子邮件中的支持很差。

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0">
  <table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid;">
    <tr>
      <td style="width: 65%; border: 1px solid red; vertical-align: top;">
        <table>
          <tr>
            <td>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem veniam ut quos esse recusandae accusantium aut, nemo laboriosam voluptatem libero nisi
            </td>
          </tr>
          <tr>
            <td>
              <a 
                class="content__button" 
                target="_blank" 
                href="" 
                style="
                  font-size: 15px;
                  color: #ffffff;
                  display: block;
                  text-align: center;
                  padding: 13px 0px;
                  max-width: 50%;
                  text-decoration: none;
                  background-color: #2dbbeb;
                  cursor: pointer;
              ">open</a>
            </td>
          </tr>
        </table>
      </td>
      <td style="width: 35%; height: 300px; border: 1px solid green; vertical-align: top; padding-top: 20px;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque reiciendis laboriosam nostrum quae, velit harum ratione reprehenderit asperiores eum nam earum illum atque. Fuga quaerat nisi deleniti voluptatem reprehenderit numquam.
      </td>
    </tr>
  </table>
</body>
</html>

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0">
  <table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid;">
    <tr>
      <td style="width: 65%; border: 1px solid red; vertical-align: top;">
        <table>
          <tr>
            <td>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem veniam ut quos esse recusandae accusantium aut, nemo laboriosam voluptatem libero nisi
            </td>
          </tr>
          <tr>
            <td>
              <a 
                class="content__button" 
                target="_blank" 
                href="" 
                style="
                  font-size: 15px;
                  color: #ffffff;
                  display: block;
                  text-align: center;
                  padding: 13px 0px;
                  max-width: 50%;
                  text-decoration: none;
                  background-color: #2dbbeb;
                  cursor: pointer;
              ">open</a>
            </td>
          </tr>
        </table>
      </td>
      <td style="width: 35%; height: 300px; border: 1px solid green; vertical-align: top; padding-top: 20px;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque reiciendis laboriosam nostrum quae, velit harum ratione reprehenderit asperiores eum nam earum illum atque. Fuga quaerat nisi deleniti voluptatem reprehenderit numquam.
      </td>
    </tr>
  </table>
</body>
</html>

【问题讨论】：

标签： css email html-table html-email vertical-alignment

【解决方案1】：

你应该使用vertical-align

为tr添加这个：

tr{
height: 300px;
vertical-align: bottom;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

您为右列设置了 300 像素的高度，因此也为左列执行此操作（如果需要，还可以使用 padding-top）。然后，您可以将第一个<tr> 设置为vertical-align:top，将第二个<tr> 设置为vertical-align:bottom。您还需要父表的高度为 100%。

我还没有在电子邮件中对此进行过测试，但还要注意高度可能会在移动设备上发生变化，其中列被挤压成更小的宽度。

<table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid;">
    <tbody><tr>
      <td style="width: 65%;border: 1px solid red;vertical-align: top;height: 300px;padding-top: 20px;">
        <table style="height: 100%;">
          <tbody><tr style="vertical-align: top;">
            <td>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem veniam ut quos esse recusandae accusantium aut, nemo laboriosam voluptatem libero nisi
            </td>
          </tr>
          <tr>
            <td style="vertical-align: bottom;">
              <a class="content__button" target="_blank" href="" style="
                  font-size: 15px;
                  color: #ffffff;
                  display: block;
                  text-align: center;
                  padding: 13px 0px;
                  max-width: 50%;
                  text-decoration: none;
                  background-color: #2dbbeb;
                  cursor: pointer;
              ">open</a>
            </td>
          </tr>
        </tbody></table>
      </td>
      <td style="width: 35%; height: 300px; border: 1px solid green; vertical-align: top; padding-top: 20px;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque reiciendis laboriosam nostrum quae, velit harum ratione reprehenderit asperiores eum nam earum illum atque. Fuga quaerat nisi deleniti voluptatem reprehenderit numquam.
      </td>
    </tr>
  </tbody></table>

【讨论】：