如何将一个div定位在flex容器的底部

Question

我正在尝试将一个 div 放置在一排并且高度与父元素相同的每个子元素的底部。

我的 HTML 代码如下：

<div class="parent">
  <div class="child">
    <div class="bottom">Footer</div>
  </div>
  <div class="child">
    <div class="bottom">Footer</div>
  </div>
  <div class="child">
    <div class="bottom">Footer</div>
  </div>
</div>

这是我想到的解决方案：http://jsfiddle.net/xtvDQ/。但是，我无法将div.bottom定位在div.child的底部。有没有什么方法可以解决这个问题？如果我删除所有与盒子相关的CSS，它就按预期工作，但我会失去对父容器的高度扩展。因此，不要轻易尝试：这里不能使用JavaScript。

- stylesuxx

Answer 1

将您的CSS更改为以下内容：

.parent {
    position:relative;
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    width:100%;
    min-height:200px;
}
.parent .child {
    background:red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    border:2px solid green;
}
.parent div + div {
    margin-left:10px;
}
.parent .child .bottom {
    position:absolute;
    bottom: 0;
    border:2px solid blue;
}

http://jsfiddle.net/isherwood/xtvDQ/11/

- Andrew Johnson

---

在这里提及您所做的更改会很有帮助。已添加 Fiddle。 - isherwood

Answer 2

http://jsfiddle.net/xuscrus/AeRVs/

display:-webkit-box;
display:box;

可能会引起问题。 我希望我的解决方案对你有用。

- xuscrus