使用 html div 创建可点击的图块
想知道是否有人可以指出我使用 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 新手，他们有什么最佳实践吗？有人可以指出我正确的方向来实现上述结果吗？
Was wondering if someone could point me in the right direction of creating a bunch of tiles using the html div elements. I need 9 tiles in total to fill the entire screen. My problem is that the height attribute does not fill the screen and each tile stacks ontop of each other rather then sitting side by side.
<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>
Im a noob to HTML are their any best practices and could someone point me in the right direction to achieve said result??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 CSS 中，您可以首先为 HTML 本身指定 100% 的高度，如下所示：
然后，您可以指定 div 容器的大小
：
Tiles:
Float left 使它们彼此相邻对齐。当没有足够的空间时，它们将换行到下一行。
演示：
http://jsfiddle.net/GolezTrol/BDb5K/
In CSS you can start with giving the HTML itself a height of 100%, like this:
Then, you can specify the sizes of the divs
Container:
Tiles:
Float left makes them align next to each other. When there is not enough space they will wrap to the next line.
Demo:
http://jsfiddle.net/GolezTrol/BDb5K/