代码之家 › 专栏 › 技术社区 › John Livermore

内部div锁定到外部div的右下角

css

John Livermore · 技术社区 · 16 年前

给定以下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的右下角。我需要怎样做css才能实现这一点?

谢谢! 约翰

2 回复 | 直到 7 年前

Orkhan Alikhanov 7 年前

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>

brettkelly 16 年前

<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:relative在外部div上,position:absolute在内部div上,告诉它您希望内部div距离父容器的右边缘和底边0像素。

推荐文章