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에 대한 멍청한 놈 결과가 말했다 어떤 모범 사례는하고 누군가가 달성하기 위해 올바른 방향으로 날 지점 수?

출처

2011-09-12 Christopher

당신은 (바람직하게는 별도의 CSS 파일에) 스타일 시트의 크기를 넣어 시작할 수 있습니다, 대신 이러한 폭과 높이 속성을 사용하여의. – GolezTrol

이처럼 HTML 자체가 100 %의 높이를주는 시작할 수 있습니다 CSS에서

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 요소를 사용하여 클릭 가능한 타일 만들기

답변

관련 문제