使用CSS在div底部对齐按钮

Question

我想在我的 div 的右下角对齐我的按钮。我怎样才能做到这一点？

div的当前css：

     float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

原文由 Harry Joy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 position:absolute; 在父 div 中绝对定位元素。当使用 position:absolute; 元素将从第一个定位的父 div 绝对定位，如果找不到，它将绝对从窗口定位，因此您需要确保内容 div 已定位。

为了使内容 div 定位，所有 position 非静态值都可以工作，但 relative 是最简单的，因为它不会自行改变 div 的定位。

所以添加 position:relative; 到内容 div 中，从按钮中删除浮动并将以下 css 添加到按钮中：

 position: absolute;
right:    0;
bottom:   0;

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

Answer 2

CSS3 flexbox 也可以用来对齐父元素底部的按钮。

所需的 HTML：

 <div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

必要的 CSS：

 .container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

截屏：

有用的资源：

• 眼镜
• MDN
• CSS 技巧

 * {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}

 <div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

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