將表格垂直對齊到底部

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的邊距。