Question

我想建一个有6个方格的网站。第一行为3，第二行为3。如果我调整窗口大小，这个方块必须更大，并且总是适应100％。

正方形必须显示like this。

我试过这个：

.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>

css正方形 - 调整大小

1 个答案: