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网格”，但是没有找到一个好的解决方案。但是，如果有人知道这个问题，请告诉我！：）

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允许它在第五个位置的空白列中使用.。该列具有自动宽度。

这不是美丽，但它可以工作...如果您有更好的解决方案，请告诉我！：）

按高度（而非宽度）平方的框以创建相等的宽度（长宽比）

1 个答案: