css方块 - 调整大小 [英] css squares - on resize

问题描述

我想用6个方块建立一个网站。
3在第一行和3个方格在第二行2.
如果我调整我的窗口的大小，这个广场必须更大，并始终适应100％。

正方形必须显示像这样。

我试过这个：

  .sq {
 float：left; 
 display：block; 
 height：96px; 
宽度：33％; 
背景颜色：＃007CC1; 
 margin：0 2px 2px 0; 
} 
 
< a class =sqhref =＃>< / a> 
< a class =sqhref =＃>< / a> 
< a class =sqhref =＃>< / a> 
< div class =clear>< / div> 
< a class =sqhref =＃>< / a> 
< a class =sqhref =＃>< / a> 
< a class =sqhref =＃>< / a> 
< div class =clear>< / div> 
  

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

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

strong> HTML

 < div id =container> 
<！ - 第1行 - > 
< div class =box>方框1< / div> 
< div class =box> box 2< / div> 
< div class =box last> box 3< / div> 
 
< div class =clear>< / div> 
<！ - 第2行 - > 
< div class =box>方块4< / div> 
< div class =box>方框5< / div> 
< div class =box last> box 6< / div> 
< / div> 
  

CSS

  #container {width：90％;} 
 .box {float：left;显示：块;背景：＃c00;颜色：#fff; text-align：center;宽度：30％;保证金：0 5％5％0;} 
 .box.last {保证金：0 0 5％0;} 
 .clear {clear：both;} 
  

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

jQuery

  $（'。box'）。each（function（）{
 $（this）.height（$（this）.width（））; 
}）; 
  

I want to built a website with with 6 squares. 3 in the first row and 3 squares in second row 2. If I resize my window this squares must be larger and always adapt themselves to 100%.

The squares must show like this.

I have tried 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>

but I don't know how to calculate the height.

How can I do it? Do you have an idea?

解决方案

Like this maybe

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

The only issue you might have is setting them to be square as the width is a variable you can't set it to the same in the CSS. Might need some jQuery to enforce that. Something like this... untested:

jQuery

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

这篇关于css方块 - 调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！