установка div внизу внешнего div

у меня проблемы с некоторыми CSS

у меня есть N внешних блоков с переменной динамической высотой.
каждый внешний блок будет иметь ОДИН внутренний блок, который должен быть внизу внешнего блока.

поэтому, используя трюк с абсолютной позицией, как в Как выровнять внутренний 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;
}

Спасибо Йорг


vertical-alignment html css
person Joergi    schedule 26.09.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Почему позиция: абсолютная; внизу: 0; невозможно?

Div-оболочка или родительский div должны иметь position: relative; или position: absolute;, чтобы дочерний элемент располагался внизу.

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

.inside {
    position: absolute;
    border: 1px solid red;
    bottom: 0;
}
person Mark    schedule 26.09.2012
comment
черт, я чувствую себя глупо сейчас, не использовал position: relative; большое спасибо, я приму ответ через несколько минут, когда мне будет позволено! - person Joergi; 26.09.2012
comment
... теперь у меня есть новый jsfiddle с реальной проблемой: jsfiddle.net/USaVa/3 - person Joergi; 27.09.2012

arrow_upward
1
arrow_downward

http://jsfiddle.net/xSTtp/6/ Если вы знаете высоту родительского элемента div, вы можете просто указать top: [родительская высота-дочерняя высота]

person Andy    schedule 26.09.2012
comment
Это не соответствует его требованиям. Его div имеют переменную динамическую высоту, поэтому высота неизвестна. - person Mark; 26.09.2012
comment
Ах, тогда он должен использовать ваш ответ. - person Andy; 26.09.2012
comment
правильно, решение Marks работает ... я только что использовал его без position: relative;, теперь работает отлично ... - person Joergi; 26.09.2012