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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:25:00  来源:igfitidea点击:

Align button at the bottom of div using CSS

cssbuttonalignment

提问by Harry Joy

I want to align my button at the bottom right corner of my div. How can I do that?

我想在我的 div 的右下角对齐我的按钮。我怎样才能做到这一点?

enter image description here

在此处输入图片说明

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:

截屏:

Output Image

输出图像

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