html - 如何在垂直空间上均匀填充多个元素

Question

如果我有以下 html/css，我怎样才能使内容元素等间距，以便它们占据容器的整个区域 - 包括红色区域。

每个元素之间的填充应该相等。

请仅使用 CSS 解决方案。

#container {
  position: absolute;
  width: 100px;
  height: 400px;
  background-color: #f00;
}
.a,
.c {
  background-color: #ccc;
}
.b,
.d {
  background-color: #999;
}

<div id="container">
  <div class="content a">something</div>
  <div class="content b">something else</div>
  <div class="content c">something longer. something longer. something longer. something longer.</div>
  <div class="content d">not a lot</div>
</div>

Answer 1

使用 display:table 和 display:table-row 是否适合您的情况？

#container {
  position: absolute;
  width: 100px;
  height: 400px;
  background-color: #f00;
  display:table;
}
.content {display:table-row;}
.a,
.c {
  background-color: #ccc;
}
.b,
.d {
  background-color: #999;
}

<div id="container">
  <div class="content a">something</div>
  <div class="content b">something else</div>
  <div class="content c">something longer. something longer. something longer. something longer.</div>
  <div class="content d">not a lot</div>
</div>