如何将我的 div 定位在其容器的底部? [英] How can I position my div at the bottom of its container?

问题描述

给定以下 HTML:

<!-- 这里的其他元素--><div id="版权">版权所有 Foo 网页设计

我希望 #copyright 坚持在 #container 的底部.我可以在不使用绝对定位的情况下实现这一点吗?

解决方案

Flexbox 方法！

在支持的浏览器中，您可以使用以下内容:

示例

.parent {显示:弹性；弹性方向:列；}.孩子 {边距顶部:自动；}

.parent {高度:100px；边框:5px 实心 #000；显示:弹性；弹性方向:列；}.孩子 {高度:40px；宽度:100%；背景:#f00；边距顶部:自动；}

<div class="child">与底部对齐</div>

<小时>

上面的解决方案可能更灵活，但是，这里有一个替代解决方案:

示例

.parent {显示:弹性；}.孩子 {align-self: flex-end;}

.parent {高度:100px；边框:5px 实心 #000；显示:弹性；}.孩子 {高度:40px；宽度:100%；背景:#f00；align-self: flex-end;}

<div class="child">与底部对齐</div>

<小时>

作为旁注，您可能需要添加供应商前缀以获得额外支持.

Given the following HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?

解决方案

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

---

The solution above is probably more flexible, however, here is an alternative solution:

Example Here

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

---

As a side note, you may want to add vendor prefixes for additional support.

这篇关于如何将我的 div 定位在其容器的底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！