html - 将表格垂直对齐到 div 的底部

Question

我有这个 div 有 2 个表，一个比另一个大。我想要的是小表与 div 的底部对齐，因此小表的底线与大表的底部相邻。目前两条顶线是相邻的。谢谢。

<div style = "border:1px solid red; width:86;">

  <table id = "small" style = "border:1px solid; float:left;">
    <td style = "font-size:12;">small</td>
  </table>

  <table id = "large" style = "border:1px solid;">
    <td style = "font-size:20;">Large</td>
  </table>

</div>

Answer 1

在这种特殊情况下，如果large保证元素具有更大的高度并且small元素具有固定的宽度，您可能可以像这样解决问题：

div {position: relative;}
#small {position: absolute; bottom: 0; width: 2.7em;}
#large {margin-left: 2.7em;}

http://jsfiddle.net/Aprillion/ZjRyE/

（对于一般情况选项，请参阅div 中元素的垂直对齐方式）

Answer 2

尝试使用小表格底部的填充或 div 的边距。