将 div 元素与容器底部对齐 [重复]

Posted 2023-03-05

【中文标题】将 div 元素与容器底部对齐 [重复]

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

【发布时间】：2017-01-30 05:26:18

【问题描述】：

我正在尝试将容器内的三个 div 之一进行底部对齐，但我遇到了一些问题。

如您所见，如果我尝试在 bottom-aligned div 上使用绝对定位，高度就会成为问题。

我可以设置一个特定的高度，但是cta-item div 中的内容可以从非常小到非常大。

我正在尝试为所有用例创建解决方案。

我知道我可以使用 jQuery 来获得最大的 cta-item div 的高度并进行相应的调整，但我会尽可能避免使用 jQuery/JS。

我用我目前拥有的东西创建了一个小提琴here。

提前谢谢你！

.dynamic-cta-ctr 
  display: flex;

.dynamic-cta-ctr .cta-item 
  flex: 1;
  text-align: center;
  padding: 0 30px;
  position: relative;
  border-right: 1px solid #555;

.dynamic-cta-ctr .cta-item:last-child 
  border-right: none;

.dynamic-cta-ctr .cta-item .bottom-aligned 
  /* position: absolute;
  bottom: 0; */

<div class="dynamic-cta-ctr">
  <div class="cta-item">
    <div class="heading-text"><h3>Some content</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
</div>

【参考方案1】：

将此添加到您的代码中：

.cta-item 
   display: flex;
   flex-direction: column;


.bottom-aligned 
    margin-top: auto;

revised fiddle

更多详情：Methods for Aligning Flex Items

【讨论】：

感觉像 2017 年。出色的解决方案。