使用html div創建可點擊的圖塊

想知道是否有人可以用正確的方向指向使用html div元素創建一堆圖塊的方向。我總共需要9塊瓷磚才能填滿整個屏幕。我的問題是，高度屬性不填充屏幕和每個瓦片堆疊在彼此的頂部，而不是並排坐在一起。使用html div創建可點擊的圖塊

<body> 
     <div id='container'> 
      <div id='button1' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button2' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button3' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button4' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button5' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button6' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button7' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button8' onclick='...' width='33%' height='33%'>image</div> 
      <div id='button9' onclick='...' width='33%' height='33%'>image</div> 
     </div> 


</body>

我對HTML的noob是他們的任何最佳實踐，並可能有人指出我在正確的方向來實現上述結果？

來源

2011-09-12 Christopher

您可以通過將在樣式表尺寸（最好是在一個單獨的CSS文件）開始，而不是使用這些寬度和高度屬性。 – GolezTrol

在CSS中，你可以給HTML本身的100％的高度，這樣開始：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
}

然後，您可以指定的div的大小

集裝箱：

#container { 
    width: 100%; 
    height: 100%; 
}

瓷磚：

#container div { 
    width: 33%; 
    height: 33%; 
    float: left; 
}

浮左讓它們彼此相鄰排列。當沒有足夠的空間時，它們將換行到下一行。

演示： http://jsfiddle.net/GolezTrol/BDb5K/

來源

2011-09-12 22:23:36 GolezTrol

使用html div創建可點擊的圖塊

回答

相關問題