html - css 方块 - 调整大小

Question

我想建立一个有 6 个正方形的网站。第一行有 3 个，第二行有 3 个方格 2。如果我调整窗口大小，这个方格必须更大，并且始终适应 100%。

正方形必须像这样显示。

我试过这个：

.sq {
    float:left;
    display:block;
    height:96px;
    width:33%;
    background-color:#007CC1;
    margin:0 2px 2px 0;
}

<a class="sq" href="#"></a>
<a class="sq" href="#"></a>
<a class="sq" href="#"></a>
<div class="clear"></div>
<a class="sq" href="#"></a>
<a class="sq" href="#"></a>
<a class="sq" href="#"></a>
<div class="clear"></div>

但我不知道如何计算高度。

我该怎么做？你有想法吗？

Answer 1

像这样可能是
您可能遇到的唯一问题是将它们设置为方形，因为宽度是一个变量，您无法在 CSS 中将其设置为相同。可能需要一些 jQuery 来强制执行。像这样的东西......未经测试：

$('.box').each(function(){
$(this).height($(this).width());
});

#container {width: 90%;}
.box {float: left; display: block; background: #c00; color: #fff; text-align: center; width: 30%; margin: 0 5% 5% 0;}
.box.last {margin: 0 0 5% 0;}
.clear {clear: both;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- row 1 -->
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box last">box 3</div>

<div class="clear"></div>
<!-- row 2 -->
<div class="box">box 4</div>
<div class="box">box 5</div>
<div class="box last">box 6</div>
</div>