如何让 div 在容器 div 的底部对齐 [重复]

Posted 2023-03-05

【中文标题】如何让 div 在容器 div 的底部对齐 [重复]

【英文标题】：How to get div to align at bottom of container div [duplicate]

【发布时间】：2018-01-29 14:17:17

【问题描述】：

考虑一下这个小提琴：https://jsfiddle.net/vs9a4toz/

我希望我的按钮位于其 div 的底部。

我尝试在他们的容器 div 上使用 align-self: flex-end。但这最终会导致该 div 的内容最终对齐，而不是 div 本身。

.container 
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;


.box1,
.box2,
.box3 
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;


.content 
  text-align: center;


.buttons 
  display: flex;
  flex-flow: column;

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

</div>

【问题讨论】：

您只需将flex-grow: 1 添加到content ... jsfiddle.net/vs9a4toz/2 ... 如果您想为content 提供背景色... @ 987654323@ ... 与margin-top: auto 一样，看起来不太好... jsfiddle.net/vs9a4toz/4

【参考方案1】：

https://jsfiddle.net/eLuyursq/

.buttons 
  display:flex;
  flex-flow: column;
  margin-top: auto;

只需添加margin-top: auto;

【讨论】：

+1 表示最干净的解决方案，Flexbox and "margin-(opposite direction):auto" - relevant article

@FelipeAls 给content 一个背景颜色，突然这不再那么好了......检查我对问题的评论

【参考方案2】：

将margin 属性与弹性框一起使用

.container 
  width: 600px;
  display: flex;
  flex-flow: row;
  border: 2px solid red;


.box1,
.box2,
.box3 
  width: 100%;
  border: 1px solid blue;
  display: flex;
  flex-flow: column;
  size: 100px;


.content 
  text-align: center;


.buttons 
  display: flex;
  flex-flow: column;
  margin-top: auto;

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

  <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
      <button>ONEONE</button>
      <button>TWOTWO</button>
    </div>
  </div>

</div>

【参考方案3】：

尝试使用绝对定位，代码如下：

.buttons
    position: absolute;
    bottom: 0px;


.box1,
.box2,
.box3 
    width: 100%;
    border: 1px solid blue;
    display: flex;
    flex-flow: column;
    size: 100px;
    position: relative;

【参考方案4】：

.content 上的flex-grow: 1 足以完成这项工作：

.content 
  text-align:center;
  flex-grow: 1;

它将占用.box 列中的所有可用空间。 （感谢@LGSon）

【参考方案5】：

bsd

检查一下

https://jsfiddle.net/u1bx4473/1/

你需要position:relative div 然后position:absolute; bottom:0; width:100% 按钮...

但如果您需要不被按钮隐藏的内容，您需要一个包含overflow:auto 和固定宽度或其他内容的容器...

有点像这样：https://jsfiddle.net/u1bx4473/2/

【参考方案6】：

在内容上使用填充和在按钮上使用绝对位置的解决方案：

.container 
  width: 600px;
  display:flex;
  flex-flow: row;
  border: 2px solid red;


.box1, .box2, .box3 
  width: 100%;
  border: 1px solid blue;
  size: 100px;
  position:relative;


.content 
  text-align:center;
  height: 100%;
  padding-bottom: 50px;


.buttons 
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;
  display: flex;
  flex-flow: column;

<div class="container">

  <div class="box1">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 
  
    <div class="box2">
    <div class="content">
      <p>HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ HEJ </p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 
  
    <div class="box3">
    <div class="content">
      <p>HEJ</p>
    </div>
    <div class="buttons">
        <button>ONEONE</button>
        <button>TWOTWO</button>
    </div>
  </div> 

</div>