在主Div上底部对齐Div

时间:2011-09-04 19:47:13

标签: html css

我有两个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>

5 个答案:

答案 0 :(得分:55)

像这样修改你的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>

答案 1 :(得分:8)

给你的父div position: relative,然后给你的孩子div position: absolute,这将div绝对定位在其父级内,然后你可以给孩子bottom: 0px;

参见此处的示例:

http://jsfiddle.net/PGMqs/1/

答案 2 :(得分:3)

我想你需要绝对的位置

.vertical_banner {position:relative;}
#bottom_link{position:absolute; bottom:0;}

答案 3 :(得分:2)

除非你使用绝对定位或javascript,否则这在HTML中是不可能的。因此,一种解决方案是将此CSS提供给#bottom_link:

#bottom_link {
    position:absolute;
    bottom:0;
}

否则你必须使用一些javascript。这是一个jQuery块,应该可以解决这个问题,具体取决于页面的简单性。

$('#bottom_link').css({
    position: 'relative',
    top: $(this).parent().height() - $(this).height()
});

答案 4 :(得分:-1)

请试试这个:

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