在 div 容器底部对齐 div [重复]

Posted 2023-03-06

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

【英文标题】：Align div at bottom of div container [duplicate]

【发布时间】：2021-09-22 06:14:03

【问题描述】：

我知道这个问题出现了很多次，但没有一个建议的解决方案对我有用，所以我打开了一个代码沙箱并做了一个示例。

我想要什么

我想在已经有一些子元素的 div 底部放置一个项目。在我的代码沙箱中，放置在底部的所需 div 的 className 为 note__actions。

我尝试了什么

将容器设置为position: relative，将项目设置为position: absolute 使用 flexbox 并将容器设置为 display: flex 并将项目设置为 align-self: flex-end 许多其他的东西，比如垂直对齐，以及制作空项目来填充中间的空间

分区设置

<div className="flexBoxContainer" />
    <div className="item">
        <div>Header</div>
        <div>Title</div>
        <div>Paragraph</div>
        <div className="bottom__item">Actions>/div> // Only this div should go to the bottom of the "item" div
    </div>
</div>

沙盒

https://codesandbox.io/s/infallible-sound-wf166?file=/src/App.js

【问题讨论】：

您希望将 Sandbox 的哪个元素准确地放在底部？

带有className="note__actions"的div

【参考方案1】：

给容器display: flex; justify-content: space-between; - 这将把内容从上到下拉。如果您只想要底部的最后一项而顶部的其余部分，请用 div 包裹其余部分，例如

<div className="flexBoxContainer" />
    <div className="item">
        <div>
            <div>Header</div>
            <div>Title</div>
            <div>Paragraph</div>
        </div>
        <div className="bottom__item">Actions>/div>
    </div>
</div>

【讨论】：

我只想把最后一项放在底部。我知道你想做什么，谢谢你的回答。为什么align-self: flex-end 或任何其他解决方案不起作用？

因为flex-direction: column; 本质上是在侧向翻转 div。没有它也行。列的另一种解决方案是拉伸其中一个 div 以占据整个空间，例如，您可以提供“段落”div flex-grow: 1;。干杯！

【参考方案2】：

将margin-top : auto 添加到note__actions 元素

【参考方案3】：

您已经在使用flexbox，这很棒。现在，在note__actions 上使用margin-top:auto 将div 推到底部。

.note__actions 
  margin-top: auto;  

【讨论】：

如此简单的改变，但效果很好，谢谢！！

很高兴这有助于@BenjaminK

【参考方案4】：

您可以为此使用网格。 在codesandbox.io上更改您的样式：

.note 
  background-color: rgb(255, 255, 211);
  border-radius: 15px;
  width: 200px;
  padding: 24px;
  display: grid;
  /*flex-direction: column;*/
  grid-template-rows: 50px 80px 1fr 80px;  /* height: 100%; */
  /* align-items: flex-end; */
  /* position: relative; */


.note__actions_bot 
  background-color: red;
  height: 100px;
  display: grid;
  justify-content: center;
  align-items: center;
 

我推荐这个很棒的视频来获得一个很好的概述和一些提示，以及何时使用 flex、grid 和其他解决方案中的哪一个：

https://www.youtube.com/watch?v=qm0IfG1GyZU&feature=youtu.be

【讨论】：

感谢您的回答，所以您认为与display: grid 合作是更好的方法吗？非常欢迎您的视频解释，因为我大部分时间都使用 flex，这将有助于我打开其他解决方案的方法。

你的视频链接都一样。

如果您需要全高布局，其中的东西填满按钮，那么网格将变得非常方便。在视频中，您会看到许多建议。我认为没有规则可以更好地使用网格或 flexbox。关键是：选择最适合给定问题的正确工具。

【参考方案5】：

例如，您可以将flex: 1; 添加到灵活的内容中

.note 
  background-color: rgb(255, 255, 211);
  border-radius: 15px;
  height: 400px;
  width: 200px;
  padding: 24px;
  display: flex;
  flex-direction: column;


.note-content 
  flex: 1;


.note-action 
  align-self: flex-end;

<div class="note">
  <div>Peter Holbert - 09. Jul 21 23:28</div>
  <div>Note Title</div>
  <div class="note-content">Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="note-action">Action 1</div>
</div>