-5

6つの正方形でウェブサイトを構築したい. 最初の行に 3 つ、2 番目の行に 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>

しかし、高さの計算方法がわかりません。

どうすればいいですか？アイデアはありますか？

4

1 に答える 1

3


幅は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>

于 2012-10-15T15:45:41.260 に答える