我的栅格系统实现September 20, 2008

http://files.gracecode.com/2009_11_05/25552637224d.jpg

如果没有了解栅格系统是什么,建议 看完这篇文章 以后再回来。

其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(譬如: YUIBluePrint )。

引用 One True Layout 文中所言,良好的布局应该具有的几个特性:

  1. 具有一定的灵活性
  2. 等高
  3. 基于栅格

请允许我「重复造了轮子」,我的栅格系统实现是基于 「伪绝对定位布局」 ,这样可以更好的实现上述所言的几个特征(很难解释,还是直接看 DEMO )。

http://lab.gracecode.com/grids/index.html 定义的 950px 宽度为公式 W )

column-24 start-01

因为是上述「伪绝对定位」的布局,所以相应列之间不会相互影响。而理解上述布局可能需要些时间,同时感谢师兄那么详细的讲解,我相信也会给你带来收获。

另, 感谢 Missx 提供栅格标准

  1. 黄金分割标准:右边的大小一般是左边大小的黄金比例
  2. 平分:在1024的分辨率下,一般采用330左右的分割
  3. 两栏分割:左边660 右边260左右
  4. 三栏分割:左边是200左右 中间400左右 右边300左右
  5. 三栏分割:右边两栏之和是左边的0.618
  6. 三栏分割:中间180 两边分别为380左右

很难具体的解释其中的细节,但是希望有问题的朋友能够留言,我尽量帮你解答。

§ 15 条评论

  1. fen fen

    很好,受教了。^______^

  2. 知道并了解这个栅格化的计算公式,但是对于应用还是觉得有点模糊,感觉处于混沌中,缺点什么来点通它。看了UED的文章开始就有点混沌,看了你的文章也仍是混沌中,也许正如你所说的,其中的细节很难解释出来。

  3. 有个比较严重的问题,在ie6下浮动元素需要position:relative;才能显示。
    所以类似的方法,还是不要写的太灵活,不然多处使用会给后期带来一定的痛苦.

  4. Wasabi Wasabi

    呵呵,受教了,听了很多新名词~~~

    另外BluePrint 的连接有问题,多三个w

  5. Missx Missx

    那个....
    标准只是我自己参考其他的网站自己总结的....
    算不得真正的标准....

  6. Missx Missx

    PS...为什么要删除呢?
    太在意杂音了反而听不到真正的音乐了

  7. 留个脚印吧。
    除了很好,很强大。再无其他感想~

  8. @Rage 这布局虽然灵活性较大,不过也如原文的作者所言,唯一“不放心”的就是缺乏长期使用的“稳定性”。不过我们至少可以尝试下(如果你能在首页尝试下,玉溪大大的伺候)。

    @Missx 蓝色个人感觉不像以前那样有“学术”的氛围了,潜水 N 久发了篇结果是这样,不得不让人心寒。

  9. 我这个人一向 BS 绝对定位.

  10. cc cc

    还是比较喜欢table.哈哈,你这个文章好象把原文的意思给那啥了...

  11. Missx Missx

    @手气不错
    整个互联网的学术氛围都没有以前浓厚了,难道我们就不在互联网上讨论了?

    最终还是要形成圈子型的讨论,所以才有了home.blueidea.com

  12. jany jany

    很强悍!~受教了

  13. jany jany

    不知道CSS什么时候可以有乘法那就好算多了!~要不还是得写很多,有些根本用不上

  14. jany jany

    最好把那些程序里面的算法如逻辑与、或。还有条件、循环都用上

  15. 受教了,不是很明白...

添加评论




* Required (but your email address will never be published)

Yahoo 统计