javascript - 用多个 DIV 填充屏幕

Question

情况:我目前正在设计一个网站，需要用 60px x 60px DIV 填满整个屏幕。它们就像墙上的瓷砖，只是需要有那么多瓷砖，因为每个瓷砖都必须在悬停时将其颜色更改为随机值。

问题:如果显示器分辨率发生变化，DIV 的数量也会发生变化。我意识到我需要根据屏幕尺寸生成那些平铺的 DIV。我也意识到这可能是使用 javascript 完成的

问题:如何做到这一点？

Answer 1

我会建议一个没有 javascript 的解决方案。有一个 overflow hidden 的容器。在正方形 div 内，左边有 float ，所以它们会填满:

<style type="text/css">
.container {
overflow: hidden;
height: whatever you want
width: whatever you want
}
.container .square {
float: left;
width: 60px;
height: 60px;
display: block;
}
</style>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
... enough of it ...
</div>

当然你可以使用javascript。我建议使用像 prototype 或 jquery 这样的库来处理 onload 和 onresize 事件。然后通过屏幕宽度和高度，您可以计算出您需要多少个 div。这可能是 (width/60)*(height/60) 之类的东西....