将元素推到父级的底部

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 - Ordering Flex Items - The Order Property

这是一个例子：

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

还要注意：

  

弹性布局的重新排序功能有意仅影响视觉渲染，而语音顺序和导航基于源顺序。

     

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

     

W3 - CSS Flexible Box Layout - Ordering and Orientation

您可能还需要检查flex的浏览器兼容性。
在撰写本文时，建议vendor prefixes用于较旧的浏览器。