/ / Allineare più div alla parte inferiore del div principale - css, html, styles

Allineare più div alla parte inferiore di div principale - css, html, styles

Ho div più bambini all'interno di un div padre. utilizzando CSS, è possibile allineare verticalmente tutti i div figlio alla parte inferiore del contenitore genitore in modo che venga visualizzato qualcosa come il seguente:

inserisci la descrizione dell'immagine qui

L'altezza delle div child sarà sconosciuta (dinamica).

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

stile sotto:

#container {

height: 500px;

}

Problema dimostrativo.

risposte:

16 per risposta № 1

È possibile utilizzare i seguenti stili per il contenitore

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

Soluzione demo qui.