создание кликабельных плиток с помощью HTML Div - PullRequest
Новая
       25

создание кликабельных плиток с помощью HTML Div

1 голос
/ 13 сентября 2011

Интересно, может ли кто-нибудь указать мне правильное направление создания группы плиток с использованием элементов 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, это их лучшие практики, и кто-то может указать мне правильное направление для достижения указанного результата ??

1 Ответ

3 голосов
/ 13 сентября 2011

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

...