CSSでボックス内の要素を下揃えする

tableレイアウトではtdにvalign="bottom"を指定するだけで実現できた下揃え。これがCSSだとうまいようにいかない。text-alignで横の位置については簡単に指定することができるが、縦位置の指定をするプロパティは設けられていないようだ。vertical-alignはボックス要素には適用されないみたい。

デザインに下揃えの要素が入っているものをコーディングする必要に迫られたことが多々あったのだけど、それがCSSでどうにも実現できないので困っていた。google先生に伺ってみたが直接の解決策を明示している記事には行き着くことができなかった。が、カラムレイアウトをposition指定を利用して行うサンプルを応用して実践することができた。なんてことはない、要はボックスに内包される要素を絶対配置してやればいいのだ。以下サンプル。

これにも弱点があって、内包される全ての要素が絶対配置されていると、大枠のボックスの縦幅が広がらない。上記のソースでは大枠のボックスに縦幅の指定をしているので展開しているが、この場合内包している要素の縦幅が大枠のそれを超えると、内包の要素がはみ出てしまう。要素の絶対配置を外せば、その要素の縦幅に応じて大枠のボックスの縦幅はフレキシブルに伸縮するようになる。縦幅が必ず内包される要素のなかで最大値になるものがあれば、それについては絶対配置せずにおいてもいいかもしれない。