Css 按高度（而非宽度）排列方形框，以创建相等的宽度（纵横比）

我知道在{padding bottom}之前有

：的平方解。这仅适用于宽度值，因为填充始终使用与父宽度的关系。-但这确实是我的问题

我只有一个固定的高度值（由父容器决定），我需要那个高度值的平方框。我不喜欢使用JS。如果有办法用纯CSS替换静态宽度值，请告诉我

下面是一个简单的代码示例：


div.wrapper{
高度：70像素；
填充物：5px；
背景：黑色；
}
分区箱{
浮动：左；
宽度：计算（70px-10px）；/*这里是宽度的静态值，但最好是与（父）高度的关系*/
高度：计算（100%-10px）；
保证金：5px；
}
B.b1分区{
背景：橙色；
}
B.b2分区{
背景：红色；
}
盒子b3分区{
背景：绿色；
}
分区框b4{
背景：道奇蓝；
}
分区箱b5{
浮动：对；
背景：灰色；
}

A.
B
C
D
E
好吧，我找到了一种使用网格和css变量的方法


：根目录{
--盒间距：10px；
--盒长：60px；
}
.电网{
显示：网格；
网格模板列：重复（4，变量（--框长））自动变量（--框长）；
网格自动行：var（--框长度）；
网格模板区域：
“a b c d.e”；
网格间距：var（--框间距）；
填充：var（--框间距）；
背景：黑色；
}
.grid>：第n个子项（1）{
网格面积：a；
背景：橙色；
}
.grid>：第n个子项（2）{
网格面积：b；
背景：红色；
}
.grid>：第n个子项（3）{
网格面积：c；
背景：绿色；
}
.grid>：第n个子项（4）{
网格面积：d；
背景：蓝色；
}
.grid>：第n个子项（5）{
网格面积：e；
背景：灰色；
}

A.
B
C
D
E
好吧，我找到了一种使用网格和css变量的方法


：根目录{
--盒间距：10px；
--盒长：60px；
}
.电网{
显示：网格；
网格模板列：重复（4，变量（--框长））自动变量（--框长）；
网格自动行：var（--框长度）；
网格模板区域：
“a b c d.e”；
网格间距：var（--框间距）；
填充：var（--框间距）；
背景：黑色；
}
.grid>：第n个子项（1）{
网格面积：a；
背景：橙色；
}
.grid>：第n个子项（2）{
网格面积：b；
背景：红色；
}
.grid>：第n个子项（3）{
网格面积：c；
背景：绿色；
}
.grid>：第n个子项（4）{
网格面积：d；
背景：蓝色；
}
.grid>：第n个子项（5）{
网格面积：e；
背景：灰色；
}

A.
B
C
D
E
如果要定义父项的高度，则使用CSS变量在childsYeah的高度/宽度中重复使用相同的值，但这只会对IE兼容性有害。（）：/如果要定义父项的高度，则使用CSS变量在childsYeah的高度/宽度中重复使用相同的值，但这只会对IE兼容性有害。()  :/