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

时间:2011-12-28 00:42:45

标签: css html

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

如果我只是修复容器的宽度,并在其中添加图像,它们将从上到下堆积。如何让它们从下往上堆积?

由于

1 个答案:

答案 0 :(得分:3)

要使其在现代浏览器中运行,您可以使用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.

顺便说一下,只有它们与底部对齐,它仍然显示在顶部的第一个块......