css正方形 - 調整大小

-4

我想用6個方塊構建一個網站。 3在第一行和3在第二行2正方形2. 如果我調整我的窗口這個廣場必須更大，並始終適應100％。css正方形 - 調整大小

正方形必須顯示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>

，但我不知道如何計算的高度。

我該怎麼辦？你有好主意嗎？

來源

2012-10-15 mal200

平方必須證明這樣的PIC ---> http://www.bildupload.com/index.php?image=21f940ea9e7d88dcf7d3779c307524c3 – mal200

使用CSS和相對大小百分比。 - 到目前爲止已經嘗試了什麼？ – Smamatti

我試過了 .sq {float：left;顯示：塊;高度：96PX;寬度：33％;背景色：＃007CC1; margin：0 2px 2px 0; }

但idont知道我怎麼計算高度 – mal200

像這樣也許

HTML

<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

#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;}

你可能有唯一的問題是把它們設置爲正方形的寬度是可變的你不能在CSS中將其設置爲相同。可能需要一些jQuery來執行。事情是這樣的......未經測試：

jQuery的

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

來源

2012-10-15 15:45:41 Matthew3man

css正方形 - 調整大小

回答

相關問題