creating clickable tiles with html div's
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??
In CSS you can start with giving the HTML itself a height of 100%, like this:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
Then, you can specify the sizes of the divs
Container:
#container {
width: 100%;
height: 100%;
}
Tiles:
#container div {
width: 33%;
height: 33%;
float: left;
}
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/
加载中,请稍侯......
精彩评论