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

是最简单的，因为它不会自行更改 div 定位。

所以将

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;
}

截图：

有用的资源：

• 规格
• 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>

Answer 3

父容器必须有这个：

position: relative;

按钮本身必须有这个：

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

或任何你喜欢的

Answer 4

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

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

Answer 5

就我而言：

position: sticky;
bottom: 0;
right: 0;

Answer 6

向右走，也可以用同样的方式向左走

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