使用 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，我希望容器 2 成为 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%。