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;

    }

Problem demo .

Answer 1

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

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

Solution demo here .