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

试试这个解决方案：

<div>
<div id="wrapper" class="parent" style="height:600px; border: 1px solid red; position:relative;">
<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; position:absolute; bottom:0;"  class="child">Needs to be at bottom</div>
</div>
</div>

位置：绝对在此上下文中将绝对定位在包含框内 - 因此它不是文档或浏览器窗口的绝对定位。

通过这个小提琴看到它：http://jsfiddle.net/fdxj1oue/

Answer 2

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

解决方案：

外容器

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

内部容器

.child {
margin-top: auto;
}

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

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

2 个答案: