css - 按高度(不是宽度)平方框以创建相等的宽度(纵横比)

Question

我知道 :before { padding-bottom } 的平方解。这仅适用于宽度值，因为填充始终使用与父宽度的关系。 - 但这正是我的问题。

我只有固定 HEIGHT 的值(按父容器)，我需要按该高度值排列的方框。我不喜欢用JS。如果有使用纯 CSS REPLACE STATIC WIDTH 值的解决方案，请告诉我!

这是一个简单的代码示例:

div.wrapper {
  height: 70px;
  padding: 5px;
  background: black;
}

div.box {
  float: left;
  width: calc(70px - 10px); /* here is that static value for width, but better would be a relation to (parent) height */
  height: calc(100% - 10px);
  margin: 5px;
 }

div.box.b1 {
  background: orange;
}

div.box.b2 {
  background: red;
}

div.box.b3 {
  background: green;
}

div.box.b4 {
  background: dodgerblue;
}

div.box.b5 {
  float: right;
  background: grey;
}

<div class="wrapper">
  <div class="box b1">A</div>
  <div class="box b2">B</div>
  <div class="box b3">C</div>
  <div class="box b4">D</div>
  <div class="box b5">E</div>
</div>

我也在寻找“css-3 grid”，但没有找到好的解决方案。但如果有人知道这个问题，请告诉我! :)

PS:仅供引用...父级的宽度始终为 100%(或 vw)。我想创建一个具有定义高度的导航栏，它可以通过媒体查询进行更改。但只有高度值，而不是父容器的宽度值。

PPS:我在这里发现了一些关于那个问题的更多问题，但没有人理解询问者。因为我们不是在寻找“var height = width”，所以我们在寻找“var width = height”。 ;)

Answer 1

好的，我找到了一种使用网格和 css-vars 的方法...

:root {
  --box-spacing: 10px;
  --box-length: 60px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, var(--box-length)) auto var(--box-length);
  grid-auto-rows: var(--box-length);
  grid-template-areas: 
    "a b c d . e";
  grid-gap: var(--box-spacing);
  padding: var(--box-spacing);
  background:black;
}

.grid > :nth-child(1) {
  grid-area: a;
  background:orange;
}

.grid > :nth-child(2) {
  grid-area: b;
  background:red;
}

.grid > :nth-child(3) {
  grid-area: c;
  background:green;
}

.grid > :nth-child(4) {
  grid-area: d;
  background:blue;
}

.grid > :nth-child(5) {
  grid-area: e;
  background:grey;
}

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

我只是对宽度和宽度长度使用相同的 var()。 grid-template-areas 允许它使用 . 作为第五个位置的空列。该列具有自动宽度。

这不是美观，但它有效...如果您有更好的解决方案，请告诉我! :)