我如何定位我的div在它的容器底部？

Question

我如何定位我的div在它的容器底部？给定以下HTML：<div id="container">  <!-- Other elements here -->  <div id="copyright">    Copyright Foo web designs  </div></div>我想#copyright固守于.的底部#container.我可以在不使用绝对定位的情况下实现这一点吗？如果Float属性支持“底部”的值，那么似乎就可以做到这一点，但不幸的是，它并不支持。

Answer 1

很可能不会。

指派position:relative到#container，然后position:absolute; bottom:0;到#copyright.

#container {

    position: relative;

}

#copyright {

    position: absolute;

    bottom: 0;

}

<div id="container">

  <!-- Other elements here -->

  <div id="copyright">

    Copyright Foo web designs

  </div>

</div>

Answer 2

柔韧箱进场！

在……里面受支持的浏览器，您可以使用以下内容：

这里的例子

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

作为附带说明，您可能需要添加供应商前缀以获得更多支持。