html - Fluid 960网格系统中的CSS

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的观点：尝试调整浏览器的尺寸（像素尺寸不固定，请使用图片作为背景进行进一步研究）

谢谢！

最佳答案

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

上面的计算应按比例考虑：在一个刚发生的960px容器中，“ grid_6”在每个网格上左右各有1％的边距= 6 * 60 + 5 * 20的总宽度= 460px或47.916％* 960/100 （其中CSS2框模型中的宽度定义为border + padding + context，而不是怪异模式中broken之一）。

对于“ 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。

关于html - Fluid 960网格系统中的CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18774804/