0

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

主页在标题“自定义 CSS 生成器”下提供了一个指向流体网格系统的链接，该链接奇怪地跳过以包含上述测试（按“预览”查看测试）。我决定添加这样一个测试，因为流体网格的 css 确实有这些类！

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

.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) 最大的问题仍然存在于我的带有类or的DIV测试用例中，其中包含的 DIV 被缩小并且不会在其全宽中扩展！"grid_6 pull_6""grid_6 push_6"

有谁知道流体网格 960 模板的解决方案，它确实成功地呈现了彼此相邻的.pull和类？.push

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

谢谢！

4

1 回答 1

0

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

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

将上面的 460px 结果用于“grid_3”孩子，我们应该测量 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。

于 2013-09-16T16:43:45.183 回答