CSS无法保持div的宽高比（padding-top无法正常工作）

Question

我不知道如何，但是我已经待了好几个小时了，无法弄清楚。

我正在尝试使div具有固定的宽高比1:1，但是padding-top技巧却无效。

这是我的代码：

HTML：

<div class="test">
  <div/><div/><div/><div/>
</div>

CSS：

.test {
  width: 50px;
  height: 0px;
  padding-top: 100%;
  background: blue;
}

有人能弄清楚我在做什么错吗？

JSFiddle链接：http://jsfiddle.net/ajpgbc0L/

预期结果：http://jsfiddle.net/ajpgbc0L/2/

编辑：我应该明确指出宽度可以是任何

Answer 1

在其周围添加具有设置宽度的包装器元素将使您获得所需的结果：

<div class="test__outer">
  <div class="test">
    <div/><div/><div/><div/>
  </div>
</div>

css：

.test {
  height: 0px;
  padding-top: 100%;
  background: blue;
}

.test__outer {
  width: 50px;
}

这是因为占位填充是根据包含块的宽度而不是您要在其上设置填充的块的宽度来计算的： https://developer.mozilla.org/en-US/docs/Web/CSS/padding#Values