Question

我创建了一些瓷砖，它们都适合一页，所以每个瓷砖都有一个固定的高度。在这个例子中，我想要创建一个3行的网格，其中每行的高度总是33％，每个正方形只需要33％来决定它的高度。所以你可以说：

height: 33%;
width: height;

我一直在环顾四周，并且我已经通过宽度看到了一些方法，但是在没有固定高度的任何地方都找不到。

有什么想法吗？

更新

http://jsfiddle.net/wL68jwxc/

这是一个显示我当前代码的小提琴。因此，在下面的一些帮助之后，我想确保这两个方格总是在同一行...所以如果我改变屏幕的宽度，它们仍然是正方形并且在同一行而不管屏幕大小。我意识到这与标题完全不同，但问题的逻辑仍然是相同的。

Answer 1

您可以使用视口单元执行此操作。

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>

设置固定高度的宽度和高度相等

1 个答案: