Html 如何将 div 粘贴到另一个 div 的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7694697/
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
How can I stick a div to the bottom of another div?
提问by Dee
Okay, so this is the parent div:
好的，这是父 div：
#left {
width: 50%;
height: 100%;
background-color: #8FD1FE;
float: left;
opacity:0.75;
filter:alpha(opacity=75);
-webkit-transition: all .45s ease;
-moz-transition: all .45s ease;
transition: all .45s ease; }
And this is the div inside the div:
这是div里面的div：
#reasons {
background-image:url('arrow1.png');
background-repeat: no-repeat;
height: 94px;
width: 400px;
margin: 0 auto 0 auto; }
I've tried a bunch of different methods, but I can't seem to keep the the second div centered and stuck to the bottom of the first div.
我尝试了很多不同的方法，但我似乎无法将第二个 div 保持居中并固定在第一个 div 的底部。
回答by icktoofay
First, make the outer diva layout parent:
首先，使外部div成为布局父项：
#left {
/* ... */
position: relative; /* anything but static */
/* ... */
}
Now let's fix the inner divto the bottom:
现在让我们将内部固定div到底部：
#reasons {
/* ... */
position: absolute;
bottom: 0;
/* ... */
}
Now it's fixed to the bottom, but we need to center it:
现在它固定在底部，但我们需要将它居中：
#reasons {
/* ... */
left: 50%;
margin: 0 0 0 -200px; /* 200px is half of the width */
/* ... */
}
See a demo on JSFiddle.
请参阅JSFiddle 上的演示。
