我如何定位我的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 {&nbsp; &nbsp; position: relative;}#copyright {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 0;}<div id="container">&nbsp; <!-- Other elements here -->&nbsp; <div id="copyright">&nbsp; &nbsp; Copyright Foo web designs&nbsp; </div></div>

Answer 2

柔韧箱进场！在……里面受支持的浏览器，您可以使用以下内容：这里的例子.parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-direction:&nbsp;column;}.child&nbsp;{ &nbsp;&nbsp;margin-top:&nbsp;auto;}.parent&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;border:&nbsp;5px&nbsp;solid&nbsp;#000; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-direction:&nbsp;column;}.child&nbsp;{ &nbsp;&nbsp;height:&nbsp;40px; &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;background:&nbsp;#f00; &nbsp;&nbsp;margin-top:&nbsp;auto;}<div&nbsp;class="parent"> &nbsp;&nbsp;<div&nbsp;class="child">Align&nbsp;to&nbsp;the&nbsp;bottom</div></div>不过，上面的解决方案可能更灵活，这里有一个备选解决方案：这里的例子.parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex;}.child&nbsp;{ &nbsp;&nbsp;align-self:&nbsp;flex-end;}.parent&nbsp;{ &nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;border:&nbsp;5px&nbsp;solid&nbsp;#000; &nbsp;&nbsp;display:&nbsp;flex;}.child&nbsp;{ &nbsp;&nbsp;height:&nbsp;40px; &nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;background:&nbsp;#f00; &nbsp;&nbsp;align-self:&nbsp;flex-end;}<div&nbsp;class="parent"> &nbsp;&nbsp;<div&nbsp;class="child">Align&nbsp;to&nbsp;the&nbsp;bottom</div></div>作为附带说明，您可能需要添加供应商前缀以获得更多支持。