在使用网格系统时，如何使div的高度与宽度相同以创建响应方块？

Question

我使用Skeleton样板来创建我的网格。我试图实现的网格每行包含3个方格。我试过制作高度百分比（33.33％），但它仍然没有创造一个正方形。谢谢！ ：）

Answer 1

在CSS3上，您将使用vh单位，这与百分比单位相同，是相对的，在本例中为viewport height。

33.33%与33.33vh相同，您的框应调整为视口的view height。

查看全部Css Units。

示例

＆＃13;

＆＃13;

.box{
  width: 100%;
  height: 33.33vh;
  }
.foo{background-color: red;}
.bar{background-color: purple;}
.na{background-color: blue;}

＆＃13;

<div class='box foo'></div>
<div class='box bar'></div>
<div class='box na'></div>

＆＃13;

＆＃13;

＆＃13;

这些是CSS上的相对单位 尝试其中一个。