使用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;

Answer 1

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

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

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

position: absolute;
right:    0;
bottom:   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;
}

<强>截图：

有用的资源：

• Specs
• MDN
• CSS Tricks

* {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>

Answer 3

父容器必须包含：

position: relative;

按钮本身必须具有：

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

或任何你喜欢的东西

Answer 4

我已经使用位置固定解决了这个问题：

.button-corner {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Answer 5

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

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