html - 如何垂直对齐 td 内的 float 表格

Question

是否可以在下面的例子中垂直对齐底部的table 3？

这是用于邮件签名，因此使用表格和使用 align 的 hack 来使表格响应(如果视口(viewport)太小，它们将堆叠在彼此下面)。现在，客户希望表 3 中的 Logo 在底部对齐(请参阅 example image)，我开始怀疑这是否可能同时保持移动友好。

我几乎在任何地方都尝试过 vertical-alignment: bottom 和 margin-top: auto; margin-bottom: 0; 在 表 3 上无济于事。我猜 align="left" 几乎覆盖了我试图制作的垂直对齐样式。

        <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
            <tr>
              <td>
                <!-- "responsive" tables -->

                <!-- table 1 -->
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
                  <tr>
                    <td>
                      Company logo
                    </td>
                  </tr>
                </table>

                <!-- table 2 -->
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
                  <tr>
                    <td>
                      Contact details<br>
                      <br>
                      <br>
                    </td>
                  </tr>
                </table>

                <!-- table 3 -->
                <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;">
                  <tr>
                    <td>
                      Another logo
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

Answer 1

您可以使用垂直对齐并使用 CSS 为单元格指定高度。

@media (min-width: 1000px) {
.logoHolder td {
  height: 50px;
  vertical-align: bottom;
}}

<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
  <tr>
    <td>
      <!-- "responsive" tables -->

      <!-- table 1 -->
      <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
        <tr>
          <td>
            Company logo
          </td>
        </tr>
      </table>

      <!-- table 2 -->
      <table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
        <tr>
          <td>
            Contact details<br>
            <br>
            <br>
          </td>
        </tr>
      </table>

      <!-- table 3 -->
      <table class="logoHolder" align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;vertical-align: bottom;">
        <tr>
          <td style="vertical-align: bottom;">
            Another logo
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>