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;

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

如何在盒子Flex容器的底部放置div

2 个答案: