вертикально выровнять таблицы в нижней части 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/

(для общих параметров случая см Vertical alignment of elements in a div)

Answer 2

Попробуйте что-нибудь с нижней частью маленького столика или с краем диванов.