使用CSS在div底部对齐按钮

Posted 2023-02-22

【中文标题】使用CSS在div底部对齐按钮

【英文标题】：Align button at the bottom of div using CSS

【发布时间】：2011-08-14 14:31:36

【问题描述】：

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

div的当前css：

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

【参考方案1】：

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

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

【参考方案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;

截图：

有用的资源：

Specs MDN CSS Tricks

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

【参考方案3】：

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

.yourComponent

   float: right;
   bottom: 0;

【讨论】：

这只会使您的按钮向右对齐。不是右下角。

float: right 会让你的按钮向右对齐，但是底部属性不起作用，底部仅适用于静态以外的位置

【参考方案4】：

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

要使内容 div 定位，所有非静态的 position 值都可以使用，但 relative 是最简单的，因为它不会自行更改 div 的定位。

所以将position:relative;添加到内容div中，从按钮中移除浮动并在按钮中添加以下css：

position: absolute;
right:    0;
bottom:   0;

【讨论】：

@Harry Joy：您是否也将position: relative 应用于包含您的表单+按钮的元素？

@Harry Joy：那么它应该是相对于div，而不是页面。如果页脚也包含在这个div 中，也许它们只是看起来是一样的。如果您知道页脚的高度，则可以在按钮上使用bottom: HEIGHT_OF_FOOTERpx。

@Harry Joy：那么这里有太多的混乱。您应该将您的 html/CSS 发布为 jsFiddle test case。

@thirtydot：搞定了。谢谢。放错位置：相对。将其添加到错误的 div 中。

真的，我只需要发表评论并指出我很高兴找到这个解决方案。这一直困扰着我多年！

【参考方案5】：

父容器必须有这个：

position: relative;

按钮本身必须有这个：

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

或任何你喜欢的

【讨论】：

请注意，此答案不正确。使用position:relative，按钮将从其原始位置移动，而不是基于父级。

右下角需要使用position: absolute。