css 方块 - 调整大小 [关闭]答案

【问题标题】：css squares - on resize [closed]css 方块 - 调整大小 [关闭]
【发布时间】：2012-10-05 15:04:26
【问题描述】：

我想建立一个有 6 个正方形的网站。第一行 3 个，第二行 3 个方格 2。如果我调整我的窗口大小，这个方块必须更大，并且总是适应 100%。

方块必须显示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>

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

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

【问题讨论】：

方块必须像这张图片一样显示---> bildupload.com/index.php?image=21f940ea9e7d88dcf7d3779c307524c3
使用 CSS 和相对大小的百分比。 - 到目前为止有什么尝试？
我试过了 .sq { float:left;显示：块；高度：96px；宽度：33%；背景颜色：#007CC1;边距：0 2px 2px 0； } a>

但不知道如何计算高度

标签： html css

【解决方案1】：

可能是这样的
您可能遇到的唯一问题是将它们设置为方形，因为宽度是一个变量，您无法在 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>

【讨论】：