javascript - 如何创建 CSS 来提供比例边距

Question

我必须在 div 容器内创建 3 个按钮。按钮下方的空间必须始终是按钮上方空间的两倍。我们如何编写 CSS 来实现这一点呢？为了便于理解，我附上了图片。

(这里1H表示比率，意思是上面的空间是1H，下面的空间就是2H)

<div class="main">
  <div class="upper-div></div>
  <div class="lower-div">
    <button class="btn-1">1</button>
    <button class="btn-2">1</button>
    <button class="btn-3">1</button>
  </div>
</div>

我想知道仅使用 HTML 和 CSS 创建此类设计的 CSS。

Answer 1

我认为你可以使用 CSS 网格来实现这一点:

.main {
  display: grid;
  grid-template-rows: 4fr 6fr;
  height: 100vh;
  background: skyblue;
}

.upper-div {
  background: yellow;
}

.lower-div {
  background: bisque;
  display: grid;
  grid-template-rows: 1fr 36px 2fr;
}

.lower-div > button {
  grid-row: 2;
}

<div class="main">
  <div class="upper-div"></div>
  <div class="lower-div">
    <button class="btn-1">1</button>
    <button class="btn-2">1</button>
    <button class="btn-3">1</button>
  </div>
</div>