流体960网格系统中的CSS [英] CSS in Fluid 960 grid system
问题描述
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
< / 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 中设置背景颜色：它不会填充整个内容以将我的测试（包含）案例包括在底部！
更奇怪的是，当我使用从原始站点（960.gs）获取的css文件中的 .clearfix 时，问题是固定！即这一个：
.clear {
clear：both;
display：block;
overflow：hidden;
可见性：隐藏;
width：0;
height：0;
}
.clearfix：before，
.clearfix：after，
.container_12：before，
.container_12：after {
content：'';
display：block;
overflow：hidden;
可见性：隐藏;
font-size：0;
line-height：0;
width：0;
height：0;
}
.clearfix：之后，
.container_12：之后{
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而不是它们的grand-父母，即container_12;这与静态模板有很大的不同，在这个模板中，测量值保持在像素上，并且与父母或祖父母无关。上面的计算应该按比例考虑：在刚发生的960像素容器中，每个网格的左右边距为1％的grid_6=总宽度为6 * 60 + 5 * 20 = 460px或47.916％* 960/100（其中CSS2框的宽度模型被定义为border + padding +上下文，而不是破坏其中一个< = IE7的怪癖
对于一个grid_3孩子，我们应该测量的结果是460px，我们应该测量22.916％* 460/100 = 105.41px，Chrome Developer Tools几乎可以提供数字，只要我们调整窗口的大小，以达到960像素container_12！
经验法则：子容器中的网格总和应该等于12 。
因此，上面的例子应该变成：
< / p> 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 。
960 grid is great and after downloading it, I noticed that demo.html contains at the end examples of the .push and .pull classes like this one:
<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 under the title "Custom CSS Generator" which strangely skips to include the above test (press "preview" to see a test).
I decided to add such a test as the css of the fluid grid DOES have these classes!
1) I immediately noticed that there is a problem when you try for example to set a background color in the outermost containing DIV: it doesn't fill the whole content to include my test (contained) cases at the bottom!
What was more strange was the fact that when I used the .clearfix from the css file that I took from the original site (960.gs) the problem was fixed! i.e. this one:
.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) The biggest problem remain with my DIV test cases with classes "grid_6 pull_6" or "grid_6 push_6", which contain DIVs that are shrinked and don't expand in their full width!
Does anybody knows a solution for a fluid grid 960 template that does succeed to present the .pull and .push classes adjacent to each other?
See my point at jsbin.com: try to resize your browser (pixel sizes do not hold, use a picture as background to investigate further)
Thanks!
解决方案 This solves the problem: "percentages in block elements are based on the width of their parents".
So, even if our "alpha" and "omega" classes are also class "grid_5" or "grid_3" they take 5 or 3 columns out of 12 of their containers which are "grid_6" and NOT of their grand-parent, i.e. "container_12"; that's the big difference from the static template where the measurements are hold on pixels and have nothing to do with parents or grand-parents.
The above calculations should be considered proportionally: a "grid_6" with 1% margins left and right per grid in a-just happened-960px container = a total width of 6*60+5*20 = 460px or 47.916%*960/100 (where the width in the CSS2 box model is defined as border+padding+context and not the broken one of <=IE7 in quirks mode).
Taken the above result of 460px for a "grid_3" child we should measure 22.916%*460/100 = 105.41px and Chrome Developer Tools gives us almost that number as long we resize the window to reach a 960px "container_12"!
Rule of thumb: "the sum of grids in a sub-container should be equal to 12".
So, the above example should become:
<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>
See at jsbin.com.
这篇关于流体960网格系统中的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
