在主Div上底部对齐Div

Question

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

Answer 1

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

Answer 2

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

见这里的例子:

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

Answer 3

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

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

否则，您将不得不使用一些 javascript。这是一个 jQuery 块，它应该可以解决问题，具体取决于页面的简单性。

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