Html 如何在盒式flex容器底部放置div

我试图在每个孩子的底部放置一个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>

页脚
页脚
页脚

这就是我想到的：

但我无法将div.bottom放在div.child的底部

有没有办法做到这一点？如果我删除所有与框相关的css，它将按预期工作，但我将丢失父容器的高度扩展

所以这并不容易：Javascript在这里不是一个选项。

可能是导致问题的原因。

---

我希望我的解决方案对您有用

将您的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;
}

---

就这样。非常感谢。如果能在这里提及您所做的更改，将非常有帮助。小提琴补充道。

.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;
}