内部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像素。