Question

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

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

仅限CSS解决方案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 2

使用flexbox

#container {
  position: absolute;
  width: 100px;
  height: 400px;
  background-color: #f00;
  display: flex;
  flex-direction: column
}
.content {
  flex-grow: 1;
}
.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>

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

2 个答案: