Question

我遇到了一些CSS的问题

我有 N 外部div，具有可变的动态高度每个outside-div都有一个inside-div，它应该位于外部div的底部。

所以，使用像How do I align an inner div with the bottom of an outer 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;或position: absolute;才能将孩子置于底部。

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

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

Answer 2

http://jsfiddle.net/xSTtp/6/如果你知道父div的高度，你可以指定top：[parent height-child height]

在外部div的底部设置div

2 个答案: