如何根据宽度百分比设置高度-纯CSS

Question

我有一个div，其宽度为屏幕宽度的50％。 在其中我要制作四个 正方形 ：

<div style="width:50%">
  <div style="width:25%"></div>
  <div style="width:25%"></div>
  <div style="width:25%"></div>
  <div style="width:25%"></div>
</div>

但是我不知道如何计算它们的高度。我不想使用js。

Answer 1

让内部div使用viewport-percentage lengths而不是百分比：

<div style="width:50%;background-color:red;">
    <div style="width:25vw;height:25vw;background-color:blue;"></div>
    <div style="width:25vw;height:25vw;background-color:green;"></div>
    <div style="width:25vw;height:25vw;background-color:blue;"></div>
    <div style="width:25vw;height:25vw;background-color:green;"></div>
</div>

（用于演示的背景色。）