960 grid 很棒,下载后,我注意到 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 查看我的观点: 尝试调整浏览器大小(像素大小不成立,使用图片作为背景进一步调查)
谢谢!
最佳答案
这解决了问题:“ block 元素中的百分比基于其父元素的宽度”。 因此,即使我们的“alpha”和“omega”类也是“grid_5”或“grid_3”类,它们从 12 个容器中取出 5 或 3 列,这些容器是“grid_6”而不是它们的祖 parent ,即“容器_12";这是与静态模板的最大区别,在静态模板中,测量值保留在像素上,与 parent 或祖 parent 无关。
上述计算应按比例考虑:在刚好发生的 960 像素容器中每个网格左右边距为 1% 的“grid_6”= 总宽度为 6*60+5*20 = 460px 或 47.916%* 960/100(其中 CSS2 框模型中的宽度定义为边框+填充+上下文,而不是 <=IE7 怪癖模式中的 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"> </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/