css - 在div中从底部到顶部堆积图像

Question

假设我有一个宽度和高度固定的 div 容器。现在，我想将图像添加到容器中，图像堆叠在一起。

如果我只是固定容器的宽度，并在其中添加图像，它们会从上到下堆积起来。我怎样才能让它们从下到上堆积起来？

谢谢

Answer 1

要使其在现代浏览器中工作，您可以使用 display: table-cell:

CSS

.container {
    display: table-cell;
    vertical-align: bottom;
}
.child {
    display: inline-block;    /* act like image */
}

html

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

An example on jsfiddle.

顺便说一句，这只是将它们对齐到底部，它仍然显示第一个 block 在顶部......