在主 Div 的底部对齐 Div答案

【问题标题】：Align Div at bottom on main Div在主 Div 的底部对齐 Div
【发布时间】：2022-04-25 15:52:43
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

谢谢，即使在一年多之后，我仍然觉得这很有用。很好，工作:)

【解决方案2】：

给你的父 div position: relative，然后给你的孩子 div position: absolute，这会将 div 绝对定位在它的父母里面，然后你可以给孩子bottom: 0px;

参见此处的示例：

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

【讨论】：

【解决方案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()
});

【讨论】：

【解决方案4】：

我猜你需要绝对位置

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

【讨论】：

【解决方案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/。

【讨论】：

在提供答案时，请花时间解释为什么提供了您的答案，以及为什么它应该解决问题。

【解决方案6】：

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

【讨论】：

感谢@beeeliu 的意见。希望其他人会发现您的建议很有用。