Fill Screen с несколькими DIVs

Question

Ситуация: В настоящее время я работаю над дизайном сайта, который требует, чтобы я заполнил весь экран 60px x 60px DIVs. Они просто напоминают плитки на стене, за исключением того, что требуется, чтобы многие из них, потому что каждый из них должен был изменить свой цвет на случайное значение при зависании.

Проблема: Если разрешение монитора изменяется, изменяется число DIV. Я понимаю, что мне нужно порождать эти черепичные DIVs относительно размера экрана. Я также понимаю, что это можно сделать с помощью javascript

Вопрос: Как это можно сделать?

Answer 1

Я бы предложил решение witout javascript. есть контейнер с переполнением скрыты. внутри квадратных divs с поплавком слева, поэтому они заполняют:

<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. я бы рекомендовал использовать библиотеку, такую ​​как прототип или jquery, и обрабатывать события onload и onresize. Затем по ширине и высоте экрана вы можете рассчитать, сколько раз вам нужно. это, вероятно, будет что-то вроде (ширина/60) * (высота/60) или что-то ....

Answer 2

Вы можете установить поплавок и встроенный

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