внутренний DIV заблокирован в нижнем правом углу внешнего DIV

Question

С учетом следующего HTML

<div style="width: 500px; height: 500px; border: 1px solid red;">
    <div style="width: 200px; height: 100px; border: 1px solid green; float: right; vertical-align: bottom;">
    </div>
</div>

Я бы хотел, чтобы внутренний блок зафиксировался в нижнем правом углу внешнего блока. Что мне нужно сделать CSS мудрым, чтобы это произошло?

Спасибо! John

Answer 1

position твой друг

<div style="width: 500px; height: 150px; border: 1px solid red; position: relative">
    <div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
    </div>
</div>

Answer 2

<div style="position:relative; width: 500px; height: 500px; border: 1px solid red;">
    <div style="position:absolute;right:0px;bottom:0px;width: 200px; height: 100px; border: 1px solid green;">
    </div>
</div>

Дай попробовать. Короткая версия: position: относительная на внешнем div, position: absolute на внутреннем div и скажите, что вы хотите, чтобы внутренний div был 0 пикселей от правого и нижнего краев родительского контейнера.