将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>

- Helen Neely

Answer 1

请提供需要翻译的内容。

.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>

- Sarfraz

---

谢谢，即使过了一年，我仍然觉得这非常有用。干得好 :) - Helen Neely

Answer 2

将父级 div 元素设置为 position: relative，然后将子级 div 元素设置为 position: absolute，这样可以让子级 div 元素相对于其父元素进行绝对定位，接着您可以给子级 div 元素设置 bottom: 0px;

示例请参见此处：

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

- mynameiscoffey

Answer 3

这在HTML中并不容易实现，除非使用绝对定位或JavaScript。因此，一种解决方案是将此CSS应用于#bottom_link：

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

否则你需要使用一些JavaScript。以下是一个jQuery块，根据页面的简单性应该可以解决问题。

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

- Jake

Answer 4

我猜你需要使用绝对定位。

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

- Simon Arnold

Answer 5

请尝试这个：

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

- Humberto Rodrigues

---

在提供答案时，请花时间解释为什么提供该答案以及为什么它能解决问题。 - Mike Rockétt

Answer 6

另一种方法是添加 margin-top: auto 和 margin-bottom: 0。这告诉顶部边距填充缺失的空间。

- beeeliu

---

感谢 @beeeliu 的贡献。希望其他人能够发现你的建议很有用。 - Helen Neely