html - 如何使用 CSS 将 div 推到底部？

Question

我有一个 HTML 定义如下:

<div id="container" className='row'>
    <div className='col-sm-9 col-md-6 col-lg-8'>
    </div>
    <div className='col-sm-3 col-md-6 col-lg-4'>
       <button id="bot" />
    </div>
</div>

因此，我希望将 ID 为 bot 的按钮(或其容器 div)放置在相对于类为 row 的容器 div 的底部。

我试着这样做:

#container
{
   position: relative;
}

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

但是，这会显着改变设计，因为它将把 bot 推到左侧并位于其同级 div 的顶部。如您所见，我正在使用 Bootstrap 将其划分为网格。在我的案例中，如何使用 CSS 将此按钮推到底部？

Answer 1

在div处使用d-flex，在按钮处使用align-self-end

示例:https://jsfiddle.net/guiljs/rupoc45j/

 <div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
   <button id="bot" class=" align-self-end">
   Button at Bottom!
   </button>
</div>

如果您使用的是 React，只需将 class 更改为 className 作为您的示例代码。