使用 CSS 对齐 div 底部的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5817233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align button at the bottom of div using CSS
提问by Harry Joy
I want to align my button at the bottom right corner of my div. How can I do that?
我想在我的 div 的右下角对齐我的按钮。我怎样才能做到这一点？
Current css of div:
div的当前css：
float: right;
width: 83%;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:625px;
overflow:auto;
回答by Kokos
You can use position:absolute;to absolutely position an element within a parent div.
When using position:absolute;the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.
您可以使用position:absolute;绝对定位父 div 中的元素。使用时position:absolute;，元素将从第一个定位的父 div 绝对定位，如果找不到，它将从窗口绝对定位，因此您需要确保内容 div 已定位。
To make the content div positioned, all positionvalues that aren't static will work, but relativeis the easiest since it doesn't change the divs positioning by itself.
要定位内容 div，所有position非静态值都将起作用，但这relative是最简单的，因为它不会自行更改 div 定位。
So add position:relative;to the content div, remove the float from the button and add the following css to the button:
因此，添加position:relative;到内容 div，从按钮中删除浮动，并将以下 css 添加到按钮：
position: absolute;
right: 0;
bottom: 0;
回答by Mohammad Usman
CSS3 flexbox can also be used to align button at the bottom of parent element.
CSS3 flexbox 也可用于对齐父元素底部的按钮。
Required HTML:
所需的 HTML：
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Necessary CSS:
必要的CSS：
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Screenshot:
截屏：
Useful Resources:
有用的资源：
* {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>回答by Aron
Parent container has to have this:
父容器必须具有：
position: relative;
Button itself has to have this:
按钮本身必须有这个：
position: relative;
bottom: 20px;
right: 20px;
or whatever you like
或者任何你喜欢的
回答by BehranG BinA
Goes to the right and can be used the same way for the left
向右移动，可以以同样的方式用于左侧
.yourComponent
{
float: right;
bottom: 0;
}
