将元素推送到父元素的底部

Question

我有如下构建的布局:

<div class="parent">
  <div class="pushBottom">Bottom Content</div>
  <div> Something </div>
  <div>Something </div>
</div>

我想要实现的输出是:

Something
Something
Bottom Content

Answer 1

实现此目的的一种方法是使用Flexbox.

...您可以定位单个项目,并使用该order属性更改它们在视觉顺序中的显示位置.

...为项目分配一个表示其组的整数.然后根据该整数将项目置于视觉顺序中,首先是最低值.如果多个项目具有相同的整数值,则在该组中,项目按源顺序排列.

MDN - 订购Flex项目 - 订单属性

这是一个例子:

.parent {
  display: flex;
  flex-direction: column;
}

.pushBottom {
  order: 1;
}

<div class="parent">
  <div class="pushBottom">Bottom Content</div>
  <div>Something</div>
  <div>Something</div>
</div>

另请注意:

弹性布局的重新排序功能有意地仅影响视觉渲染,基于源顺序保留语音顺序和导航.

作者不得使用flex-flow/flex-direction的顺序或*反向值来代替正确的源排序,因为这会破坏文档的可访问性.

W3 - CSS灵活的盒子布局 - 订购和定位

您可能还想检查浏览器的兼容性flex.
在本文发布时,建议旧版浏览器使用供应商前缀.