内部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>

我希望内部div锁定在外部div的右下角.我需要做什么才能做到这一点？

谢谢!约翰

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>

试一试.短版本:位置:外部div上的相对,位置:内部div上的绝对值,并告诉它您希望内部div与父容器的右边缘和下边缘相距0像素.