親divの下に複数のdivを整列

Question

親div内に複数の子divがあります。 CSSを使用して、次のようなものが表示されるように、垂直親コンテナの底に子div要素の全てを揃えることが可能である：

子のdivの高さはなります不明（動的）。以下

<p>Top of page</p> 
<div id="container"> 
<div class="message">Message 4</div> 
<div class="message">Message 3</div> 
<div class="message">Message 2</div> 
<div class="message">Message 1</div> 
</div> 
<p>Bottom of page</p> 

スタイル：

#container { 

    height: 500px; 

    } 

Problem demo。

Answer 1

あなたは

display: table-cell; 
vertical-align: bottom; 

Solution demo hereコンテナの次のスタイルを使用することができます。