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

或者你喜欢什么