Html 在主 Div 底部对齐 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7301720/
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
Align Div at bottom on main Div
提问by Helen Neely
I have two divs, one inside the other and I would like the small div to be aligned at the buttom of the main div.
我有两个 div，一个在另一个里面，我希望小 div 与主 div 的底部对齐。
Here's my code so far. Currently, the button is at the top of main div, instead I want it positioned at the bottom. Any help would be appreciated.
到目前为止，这是我的代码。目前，按钮位于主 div 的顶部，而不是我希望它位于底部。任何帮助，将不胜感激。
.vertical_banner {
border: 1px solid #E9E3DD;
float: left;
height: 210px;
margin: 2px;
padding: 4px 2px 10px 10px;
text-align: left;
width: 117px;
}
#bottom_link{
vertical-align: bottom;
}
Here's how I've been trying to use it, but as you can see I'm still new to CSS :)
这是我一直在尝试使用它的方式，但正如您所看到的，我仍然是 CSS 的新手 :)
<div class="vertical_banner">
<div id="bottom_link">
<input type="submit" value="Continue">
</div>
</div>
回答by Sarfraz
Modify your CSS like this:
像这样修改你的 CSS：
.vertical_banner {
border: 1px solid #E9E3DD;
float: left;
height: 210px;
margin: 2px;
padding: 4px 2px 10px 10px;
text-align: left;
width: 117px;
position:relative;
}
#bottom_link{
position:absolute; /* added */
bottom:0; /* added */
left:0; /* added */
}<div class="vertical_banner">
<div id="bottom_link">
<input type="submit" value="Continue">
</div>
</div>回答by mynameiscoffey
Give your parent div position: relative, then give your child div position: absolute, this will absolute position the div inside of its parent, then you can give the child bottom: 0px;
给你的父 div position: relative，然后给你的孩子 div position: absolute，这将绝对定位在其父级内的 div ，然后你可以给孩子bottom: 0px;
See example here:
请参阅此处的示例：
回答by Jake
This isn't really possible in HTML unless you use absolute positioning or javascript. So one solution would be to give this CSS to #bottom_link:
除非您使用绝对定位或 javascript，否则这在 HTML 中是不可能的。因此，一种解决方案是将此 CSS 提供给 #bottom_link：
#bottom_link {
position:absolute;
bottom:0;
}
Otherwise you'd have to use some javascript. Here's a jQuery block that should do the trick, depending on the simplicity of the page.
否则，您将不得不使用一些 javascript。这是一个 jQuery 块，它应该可以解决问题，具体取决于页面的简单性。
$('#bottom_link').css({
position: 'relative',
top: $(this).parent().height() - $(this).height()
});
回答by Simon Arnold
I guess you'll need absolute position
我想你需要绝对位置
.vertical_banner {position:relative;}
#bottom_link{position:absolute; bottom:0;}
回答by Humberto Pereira
Please try this:
请试试这个：
#b {
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: inline-flex;
-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
align-items: flex-end;}
Here's a JSFiddle demo: http://jsfiddle.net/rudiedirkx/7FGKN/.
这是一个 JSFiddle 演示：http: //jsfiddle.net/rudiedirkx/7FGKN/。
