如何将我的 div 放在其容器的底部？

小编典典

如何将我的 div 放在其容器的底部？

all

给定以下 HTML：

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

我想#copyright坚持到底#container。我可以在不使用绝对定位的情况下实现这一点吗？

阅读 338

2022-03-01

共1个答案

小编典典

弹性盒方法！

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

示例在这里

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

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

示例在这里

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

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

2022-03-01