자바 스크립트로 div 레이아웃 변경

Question

960 그리드 및 adaptive.js에 익숙하지 않습니다.

개념을 이해하고 성공적으로 960 그리드를 구현했습니다. 내 문제는 "적응 형"부분을 구현하는 방법을 이해하지 못한다는 것입니다. 여기

이것은 1200.css 위대한 작품 내 코드

<div class="container_12"> 
     <div id="container1" class="grid_3"></div><!--end grid_3 --> 
     <div id="container2" class="grid_7"></div><!--end grid_7 --> 
     <div id="container3" class="grid_2"></div><!--end grid_2 --> 
</div><!--end container> 

이지만, 960.css 위해 나는 grid_9 컨테이너 3 다음 "행"을 드롭 할 수 컨테이너 2를하고 싶습니다 grid_12 : 이 이미지 참조 : 내가 적응이 스타일의 재정의를 할 수있어 [적응 예] https://docs.google.com/open?id=0BzR0r0y6_XGgMHZQNm9kcDJvNFU

<div class="container_12"> 
     <div id="container1" class="grid_3"></div><!--end grid_3 --> 
     <div id="container2" class="grid_9"></div><!--end grid_9 --> 
      <div class="clearfix"></div> 
     <div id="container3" class="grid_12"></div><!--end grid_12 --> 
</div><!--end container> 

을

.foobar { 
    /* Default styles here. */ 
} 

html.range_0 .foobar { 
    /* Style overrides for: 0px to 760px */ 
} 

html.range_1 .foobar { 
    /* Style overrides for: 760px to 980px */ 
} 

하지만 제대로 작동하지 않습니다.

모든 안내에 감사드립니다.

감사합니다.

Answer 1

동일한 컨테이너에 12 개 이상의 그리드를 사용할 수 없습니다. 첫 번째 예는 아래 구조를 가지고 있기 때문에 작동합니다.

grid_3 
grid_7 
grid_2 

이 값은 12입니다. 맞습니까? 다른 예에서

당신은이 (24)와 동일 그리고 그것은 할 수 없습니다, 당신은 작동하는 12 개 컬럼을 가지고 있기 때문에 12와 동일합니다

grid_3 
grid_9 
grid_12 

있습니다. 그리드는 전체 컨테이너의 단지 비율입니다. 블로우 마크 업이있는 경우 :

<div class="container_12"> 
     <div class="grid_3"></div> 
     <div class="grid_3"></div> 
     <div class="grid_3"></div> 
     <div class="grid_3"></div> 
</div><!--end container> 

모든 그리드 _3은 전체 컨테이너 너비의 25 %입니다.