我想建立一個(gè)有6個(gè)正方形的網(wǎng)站。 第一排3個(gè)，第二排3個(gè)方塊2。 如果我調(diào)整我的窗口大小，這些方塊必須更大，并始終適應(yīng)100%。

正方形必須像這樣顯示。

我試過這個(gè):

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

但是不知道怎么算高度。

我該怎么做？你有主意嗎？

# # #可能是這樣 你可能遇到的唯一問題是將它們設(shè)置為正方形，因?yàn)閷挾仁且粋€(gè)變量，你不能在CSS中將其設(shè)置為相同。可能需要一些jQuery來加強(qiáng)這一點(diǎn)。類似這樣的東西...未經(jīng)測試:

$('.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>