1

一部の CSS に問題があります

変数の動的な高さを持つN 個の外部 div があります。
すべての外部 div には 1 つの内部 div があり、これは外部 div の下部にある必要があります。

それで、 How do I align a 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;
}

ありがとうヨルグ

4

2 に答える 2

5

なぜ position: absolute; 下: 0; ありえない？

ラッパー div または親 div には、子を下部に配置するためにposition: relative;orが必要です。position: absolute;

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

.inside {
    position: absolute;
    border: 1px solid red;
    bottom: 0;
}
于 2012-09-26T16:13:47.573 に答える
1

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

于 2012-09-26T16:14:59.780 に答える