使用JavaScript更改div布局

Question

我是960網格和Adaptive.js的新手。

我了解這些概念並成功實現了960網格。 我的問題是我不了解如何實現“自適應”部分。

這是我的代碼

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

這對於1200.css非常有用，但對於960.css，我希望container2成為grid_9，容器3下降到下一個“行”並成為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，對吧？

在另一個例子中

grid_3
grid_9
grid_12

這等於24。它不能等於12，因為您只有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>

每個grid_3是整個容器寬度的25％。