Question

960网格很棒，在下载后，我注意到demo.html最后包含.push和.pull类的示例，如下所示：

<div class="grid_6 push_6">
  <div class="grid_1 alpha">
    <p>
      60, class = "grid_6 push_6" => class = "grid_1 alpha"
    </p>
  </div>
  <!-- end .grid_1.alpha -->
  <div class="grid_5 omega">
    <p>
      380, class="grid_6 push_6" => class="grid_5 omega"
    </p>
  </div>
  <!-- end .grid_5.omega -->
  <div class="clear"></div>
  <div class="grid_3 alpha">
    <p>
      220, class="grid_6 push_6" => class="grid_3 alpha"
    </p>
  </div>
  <!-- end .grid_3.alpha -->
  <div class="grid_3 omega">
    <p>
      220, class="grid_6 push_6" => class="grid_3 omega"
    </p>
  </div>
  <!-- end .grid_3.omega -->
</div>
<!-- end .grid_6.push_6 -->

主页提供标题"Custom CSS Generator"下的流体网格系统链接，奇怪地跳过以包含上述测试（按“预览”查看测试）。我决定添加这样的测试，因为流体网格的css有这些类！

1）我立即注意到当您尝试在最外层包含DIV时设置背景颜色时出现问题：它不会填充整个内容以包含我的测试（包含）案例底部！更奇怪的是，当我使用来自原始网站（960.gs）的css文件中的.clearfix时，问题得到解决！即这一个：

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
     content: ' ';
     display: block;
     overflow: hidden;
     visibility: hidden;
     font-size: 0;
     line-height: 0;
     width: 0;
     height: 0;
}

.clearfix:after,
.container_12:after {
     clear: both;
}

2）我的DIV测试用例"grid_6 pull_6"或"grid_6 push_6"的最大问题仍然存在，其中包含缩小的DIV并且不会扩展其全宽！

是否有人知道流体网格960模板的解决方案，该模板确实成功地展示了彼此相邻的.pull和.push类？

在jsbin.com看到我的观点：尝试调整浏览器大小（像素大小不成立，使用图片作为背景进一步调查）

谢谢！

Answer 1

这解决了这个问题：“块元素的百分比基于父元素的宽度”。因此，即使我们的“alpha”和“omega”类也是类“grid_5”或“grid_3”，它们从12个容器中取出5或3列，这些列是“grid_6”而不是它们的祖父，即“ container_12" ;这与静态模板有很大不同，静态模板的测量值与像素相关，与父母或祖父母没有任何关系。

上述计算应按比例考虑：“grid_6”，每个网格左右边距为1％ - 刚刚发生 - 960px容器=总宽度为6 * 60 + 5 * 20 = 460px或47.916％* 960/100（其中CSS2框模型中的宽度定义为边框+填充+上下文，而不是broken在问号模式下的＆lt; = IE7中的宽度。

对于“grid_3”孩子，我们应该测量上述结果为460px，我们应该测量22.916％* 460/100 = 105.41px，只要我们调整窗口大小达到960px“container_12”，Chrome开发者工具就会给我们差不多这个数字！

经验法则：“子容器中的网格总和应等于12”。

所以，上面的例子应该变成：

<div class="grid_6 push_6">
   <div class="grid_2 alpha">
      <p>60, class = "grid_6 push_6" => class = "grid_2 alpha"</p>
   </div>
   <!-- end .grid_2.alpha -->
   <div class="grid_10 omega">
      <p>380, class="grid_6 push_6" => class="grid_10 omega"</p>
   </div>
   <!-- end .grid_10.omega -->
   <div class="clear">&nbsp;</div>
   <div class="grid_6 alpha">
      <p>220, class="grid_6 push_6" => class="grid_6 alpha"</p>
   </div>
   <!-- end .grid_6.alpha -->
   <div class="grid_6 omega">
      <p>220, class="grid_6 push_6" => class="grid_6 omega"</p>
   </div>
   <!-- end .grid_6.omega -->
</div>

见jsbin.com。

Fluid 960网格系统中的CSS

1 个答案: