在主 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Sarfraz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

请参阅此处的示例：

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

原文由 mynameiscoffey 发布，翻译遵循 CC BY-SA 3.0 许可协议