使用CSS在div底部对齐按钮

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

当前div的CSS：

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

您可以用来position:absolute;将元素绝对定位在父div中。使用position:absolute;该元素时，其位置将绝对位于第一个定位的父div处，如果找不到该元素，则该元素将绝对位于窗口中，因此您需要确保content div的位置。

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

因此，将其添加position:relative;到内容div中，从按钮中删除浮点数，然后将以下css添加至按钮：

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

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>

父容器必须具有以下内容：

position: relative;

Button本身必须具有以下功能：

position: relative;
bottom: 20px;
right: 20px;

或任何你喜欢的

向右移动，可以向左使用相同的方式

.yourComponent
{
   float: right;
   bottom: 0;
}