css - 将多个 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;

    }

问题演示。

Answer 1

您可以对容器使用以下样式

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

解决方案演示在这里。