将表垂直对齐到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元素具有固定宽度，那么您可能会遇到这样的问题：< / p>

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

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

（一般情况选项见Vertical alignment of elements in a div）

Answer 2

尝试使用小桌子的填充底部或div的边缘。