使用 CSS 对齐 div 底部的按钮

我想在我的 div 的右下角对齐我的按钮。我该怎么做呢？

enter image description here

当前 div 的 css:

    float: right;
width: 83%;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:625px;
overflow:auto;
538733 次浏览
小开
最佳答案

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

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

因此，将 position:relative;添加到 content div，从按钮中移除 float，并将以下 css 添加到按钮:

position: absolute;
right:    0;
bottom:   0;
小开

转到右边，可以用同样的方式使用左边

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

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

position: relative;

巴顿本身必须具备这一点:

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

或者你喜欢的任何东西

小开

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

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

截图:

Output Image

有用资源:

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

小开

我用位置固定解决了这个问题:

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

提交答案