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
inner DIV locked to lower right hand corner of outer DIV
提问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 像素。
