将表格垂直对齐到底部

Question

我有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/

（对于一般情况下的选项，请参阅Vertical alignment of elements in a div）

Answer 2

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