如何垂直对齐 td 内的浮动表

Question

在以下示例中，是否可以在底部垂直对齐表 3 ？

这是用于邮件签名，因此使用表格和align来使表格具有响应性（如果视口变得太小，它们将相互堆叠）。 现在，客户希望表 3中的徽标在底部对齐（参见示例图像），我开始怀疑这是否可能同时保持它对移动设备友好。

我已经尝试了vertical-alignment: bottom和margin-top: auto; margin-bottom: 0; margin-top: auto; margin-bottom: 0; 在表 3上无济于事。 我猜align="left"几乎覆盖了我正在尝试制作的垂直 alignment 样式。

        <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>