javascript - 使用JavaScript更改div布局

我刚接触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 */
}

但这行不通，对吧？

任何指导是非常感谢。

谢谢。

最佳答案

同一容器中的网格数量不能超过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％。

关于javascript - 使用JavaScript更改div布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12538202/