html - 在外部 div 的底部设置一个 div

Question

我遇到了一些 CSS 问题

我有N个外部 div，具有可变的动态高度。
每个外部 div 将有一个内部 div，它应该在外部 div 的底部。

所以，使用绝对位置的技巧，如如何将内部 div 与外部 div 的底部对齐？不可能。

我做了一个 jsfiddle 供你玩：http:
//jsfiddle.net/xSTtp/4/

HTML：

<div class="outside">
    <div class="inside">
        xyz
    </div>
</div>
<div class="outside">
    <div class="inside">
        xyz
    </div>
</div>

CSS：

.outside { 
    /* the height will be dynamic, 100px is just for the demo */
    height: 100px;
    border: 1px solid green;
}

.inside {
    border: 1px solid red;
    /* not working*/
    /*  display: table-cell;
            vertical-align: bottom;
            */
    /* i want the red at the bottom of the green, not in the page */
    position: absolute;
    bottom: 0;
}

谢谢约尔格

Answer 1

为什么是位置：绝对；底部：0；不可能？

包装器 div 或父 div 需要有一个position: relative;orposition: absolute;才能将子级放置在底部。

.outside { 
    position: relative;
    border: 1px solid green;
}

.inside {
    position: absolute;
    border: 1px solid red;
    bottom: 0;
}

Answer 2

http://jsfiddle.net/xSTtp/6/ If you know the height of the parent div, you can just specify top: [parent height-child height]