嗷嗷答 - 嗷嗷好的公务员考试网络答题平台

自己理解的栅格化布局

作者：不烦恼 发布时间：April 16, 2011 分类：快乐学习

很久以前看过某大牛关于960栅格化布局的文章，因为理解不够所以一直没有很深的印象。
最近在做主题的时候自己对栅格化进行了研究，于是总结出了符合自己思维的栅格化布局。下面是一个总宽度610px的布局：
grid.gif
设计思路：页度总宽度，要能平均分配1—6个不同的区域，每个区域间的边距为10px。那么如何确定页面总宽度？区域1、2、3、4、5、6的最小公倍数是60px，区域宽度=60*N（N为倍数），按最多区域为6计算总边距为10*7=70px，页面总宽度=60*N+70，这样计算出来的宽度将满足上述要求。

  1. #center{width:600px;padding:0 5px;}
  2. #center .column2{float:left;width:290px; height:50px; margin:12px 5px 0 5px; background:#eee; display:inline;}
  3. #center .column3{float:left;width:190px; height:50px; margin:12px 5px 0 5px; background:#eee; display:inline;}
  4. #center .column4{float:left;width:140px; height:50px; margin:12px 5px 0 5px; background:#eee; display:inline;}
  5. #center .column5{float:left;width:110px; height:50px; margin:12px 5px 0 5px; background:#eee; display:inline;}
  6. #center .column6{float:left;width:90px; height:50px; margin:12px 5px 0 5px; background:#eee; display:inline;}

终于写完了，有点乱！

By The Way:仿工行LOGO做了不烦恼的博客LOGO

已有 8 条评论 »

  1. 视野瞳前 视野瞳前
    December 8th, 2011 at 04:23 pm

    代码，，看着就纠结

    回复
  2. 蚂蚱 蚂蚱
    November 27th, 2011 at 10:59 am

    昨天看了下960栅格化，我的理解是这样的：

    a = 单元栏宽度
    n = 栏数目
    i = 间隔宽度
    c = 内容宽度/区域块宽度
    w = 页面宽度

    w = a*n + i*n = (a + i)*n = 960
    c = a*n + i*(n - 1) // 因为 n 个单元栏组成的区域之间有，有 n-1 个间隔

    如它默认布局是12栏的，根据第二条公式，可知道区域块的宽度，
    grid_1 = 60*1 + 20*(1 - 1) = 60
    grid_2 = 60*2 + 20*(2 - 1) = 140
    grid_3 = 60*3 + 20*(3 - 1) = 220
    grid_4 = 60*4 + 20*(4 - 1) = 300
    grid_5 = 60*5 + 20*(5 - 1) = 380
    grid_6 = 60*6 + 20*(6 - 1) = 460
    grid_7 = 60*7 + 20*(7 - 1) = 540
    grid_8 = 60*8 + 20*(8 - 1) = 620
    grid_9 = 60*9 + 20*(9 - 1) = 700
    grid_10 = 60*10 + 20*(10 - 1) = 780
    grid_11 = 60*11 + 20*(11 - 1) = 860
    grid_12 = 60*12 + 20*(12 - 1) = 940

    回复
  3. deef deef
    April 23rd, 2011 at 12:25 pm

    工行……我最开始读的是GONG XING……不过这个ICON挺好看的，突出主题吗~~

    回复
  4. 小洁 小洁
    April 16th, 2011 at 06:46 pm

    期待新作~~~~~~呵呵

    1. 不烦恼 不烦恼
      April 16th, 2011 at 10:31 pm

      只是打算换个主题，这个默认的让我折腾得惨不忍睹！

      回复
    回复
  5. mybg mybg
    April 16th, 2011 at 03:09 pm

    我是沙发！开始动手了？等看新主题。

    1. 不烦恼 不烦恼
      April 16th, 2011 at 03:29 pm

      呵，刚开始，出炉还早着呢

      1. mybg mybg
        April 16th, 2011 at 04:15 pm

        我估计一定很cms哈。。。

        回复
      回复
    回复

添加新评论 »