Question

情况：我目前正致力于网站设计，要求我使用60px x 60px DIV填满整个屏幕。它们只是像墙上的瓷砖一样，除了它需要有很多，因为每个人都必须在悬停时将其颜色变为随机值。

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

完成

问题：如何做到这一点？

Answer 1

我建议使用javascript解决方案。有一个隐藏溢出的容器。在方形div里面，左边是浮动的，所以它们填满了：

<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。这可能是（宽度/ 60）*（高度/ 60）或类似......

Answer 2

您可以设置浮动和内联

div {
  display: inline;
  width: 60px;
  height: 60px;
  float: left;
}

使用多个DIV填充屏幕

2 个答案: