在底部对齐Div Div
问题描述:
我有两个div,一个在另一个里面,我希望小div在主div的对齐处对齐。在底部对齐Div Div
这是我的代码到目前为止。目前,该按钮位于主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;
}
下面是我如何在试图使用它,但你可以看到我还是新的CSS :)
<div class="vertical_banner">
<div id="bottom_link">
<input type="submit" value="Continue">
</div>
</div>
答
修改你的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>
答
我想你需要绝对位置
.vertical_banner {position:relative;}
#bottom_link{position:absolute; bottom:0;}
答
这不是真的可以在HTML中,除非你使用绝对定位或JavaScript。所以,一个解决办法是给这个CSS来#bottom_link:
#bottom_link {
position:absolute;
bottom:0;
}
否则,你不得不使用一些JavaScript。这里有一个jQuery代码块,应该可以实现,取决于页面的简单性。
$('#bottom_link').css({
position: 'relative',
top: $(this).parent().height() - $(this).height()
});
答
给你的父母DIV position: relative
,然后给你的孩子DIV position: absolute
,这将绝对位置其父在div,那么你可以在这里给孩子bottom: 0px;
见例如:
答
请试试这个:
#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;}
这是一个JSFiddle演示:http://jsfiddle.net/rudiedirkx/7FGKN/。
+0
当提供答案时,请花时间解释为什么您的答案已经提供,以及为什么它应该解决问题。 –
谢谢,即使经过一年以上,我仍然觉得这很有用。尼斯,工作:) –
差不多两年... – Asken