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屋!