将多个div与父div的底部对齐 [英] Aligning multiple divs to bottom of parent div

问题描述

我的父div中有多个子div.使用 CSS ，可以将所有子div垂直对齐到父容器的底部，以便显示如下内容:

I have multiple child divs within a parent div. Using CSS, is it possible to vertically align all of the child divs to the bottom of the parent container so that something like the following would be displayed:

子div的高度未知(动态).

The height of the child divs will be unknown (dynamic).

<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;

    }

问题演示.

推荐答案

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

You can use the following styles for the container

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

此处的解决方案演示.

这篇关于将多个div与父div的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！