css - 如何让不同高度的 div 站在容器 div 的底部？

Question

我生成了许多具有不同高度的 % 的 div。我想让 div 站在黑色容器的底线上。我怎样才能做到这一点？如果我用 bottom: 0 使它们绝对定位，它们将相互重叠。

Answer 1

如果您可以忽略 IE9 及以下版本，这就是开发 flexbox 的目的......

HTML

<div class="container">
  <div class="box">50%</div>
  <div class="box">25%</div>
  <div class="box">25%</div>
</div>

CSS

.container {
  height: 100vh;
  background: #000;
  display: flex;
  align-items: flex-end;
}

.box {
  height: 25%;
  width: 10em;
  margin-right: 1em;
  background-color: red;
}

.box:first-child {
    height: 50%;
}