javascript - 设置固定高度后宽度和高度相等

Question

我正在创建一些图 block ，它们都适合一页，因此每个图 block 都有固定的高度。在这个例子中，我想创建一个 3 行的网格，其中每行的高度始终为 33%，每个正方形将只用这 33% 来决定它的高度。如此有效，你可以说:

height: 33%;
width: height;

我一直在四处寻找，我已经看到了一些使用宽度来做到这一点的方法，但还没有看到任何地方有固定的高度。

有什么想法吗？

更新:

http://jsfiddle.net/wL68jwxc/

这是一个显示我当前代码的 fiddle 。所以，在下面的一些帮助之后，我想确保这两个方 block 总是在同一行......所以如果我改变屏幕的宽度，无论屏幕尺寸如何，它们都会保持方 block 并且在同一行。我意识到这与标题完全不同，但问题的逻辑保持不变。

Answer 1

您可以使用视口(viewport)单位来做到这一点。

div {
  width: 33.33333vh;
  height: 33.33333vh;
  float: left;
  border: 1px solid grey;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
div {
  width: 33.33333vh;
  height: 33.33333vh;
  float: left;
  border: 1px solid grey;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>