填充多個DIV屏幕

Question

情況：我目前正在研究一個網站設計，這需要我填寫整個屏幕60px x 60px DIVs。它們只是像牆上的瓷磚一樣，只是需要有很多瓷磚，因爲每個人在懸停時必須將其顏色更改爲隨機值。

問題：如果顯示器分辨率發生變化，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。我會建議使用像原型或jQuery的庫，並處理onload和onresize事件。 然後通過屏幕寬度和高度，你可以計算出你需要多少個div。這可能會是這樣的（寬度/ 60）*（高度/ 60）或東西....

Answer 2

可以浴液和內嵌

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