html - 如何在盒子弹性容器的底部放置一个div

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在这里不是一个选项。

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/

Answer 2

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

display:-webkit-box;
display:box;

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