CSS 内部 DIV 锁定到外部 DIV 的右下角

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2421100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:41:27  来源:igfitidea点击:

inner DIV locked to lower right hand corner of outer DIV

css

提问by John Livermore

Given the following HTML

鉴于以下 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>

I would like the inner div to lock into the lower right hand corner of the outer div. What do I need to do CSS wise to make that happen?

我希望内部 div 锁定到外部 div 的右下角。为了实现这一点,我需要明智地使用 CSS 做什么?

Thanks! John

谢谢!约翰

回答by Luca Rocchi

positionis your friend

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>

回答by inkedmn

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

Give that a try. Short version: position:relative on the outer div, position:absolute on the inner div and tell it you want the inner div to be 0 pixels from the right and bottom edges of the parent container.

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