Question

想知道是否有人能指出我使用html div元素创建一堆瓷砖的正确方向。我总共需要9个瓷砖来填满整个屏幕。我的问题是，高度属性没有填满屏幕，每个瓷砖堆叠在彼此的顶部而不是并排坐着。

 <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的菜鸟是他们的最佳实践，是否有人能指出我正确的方向来实现上述结果？

Answer 1

在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/

使用html div创建可点击的图块

1 个答案: