Fluid 960网格系统中的CSS-Java 学习之路

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

The home page gives a link to a fluid grid system Headers 为"Custom CSS Generator"，奇怪地跳过以包括上述测试（按"preview"查看测试） . 我决定添加这样的测试，因为流体网格的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：尝试调整浏览器大小（像素大小不成立，使用图片作为背景进一步调查）

谢谢！

1 回答

0
这解决了这个问题：“块元素的百分比基于父母的宽度” . 因此，即使我们的“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在怪癖模式下的<= 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>
   
   <div class="grid_10 omega">
      <p>380, class="grid_6 push_6" => class="grid_10 omega"</p>
   </div>
   
   <div class="clear">&nbsp;</div>
   <div class="grid_6 alpha">
      <p>220, class="grid_6 push_6" => class="grid_6 alpha"</p>
   </div>
   
   <div class="grid_6 omega">
      <p>220, class="grid_6 push_6" => class="grid_6 omega"</p>
   </div>
   
</div>
```
见jsbin.com .
回复于 2024-04-28T23:24:35+08:00

Fluid 960网格系统中的CSS

1 回答

相关问题