jquery - 如何在CSS中不使用绝对位置的情况下将内部div定位在外部div的底部

Question

如何在CSS中不使用绝对位置的情况下将内部div定位在外部div的底部？对于下面的代码片段，只有最后一个 div 应该在底部对齐(其他三个应该按原样在顶部对齐)？

<div>
<div id="wrapper" class="parent" style="height:600px; border: 1px solid red;">
<div style="border: 1px solid blue;">Fist</div>
<div style="border: 1px solid blue;">Second</div>
<div style="border: 1px solid blue;">Third</div>
<div style="border: 1px solid blue;"  class="child">Needs to be at bottom</div>
</div>
</div>

Answer 1

你可以使用flex-box，它现在在所有主流浏览器中都有很好的支持。 http://caniuse.com/#search=Flex

解决方案:

外容器

#wrapper {
Display: flex;
Flex-direction: column;
}

内部容器

.child {
margin-top: auto;
}

最好使用last-child伪选择器来始终选择底部的div。看看这个fiddle .