双飞翼布局 v1.0
源码文件：grids.css
压缩版本：grids-min.css
合并版本：reset-grids-min.css
测试页面：grids-taobao.html
命名规则和样式生成工具：css-generator.html
更新说明
- 精简了 grids.css 文件，只保留布局基础样式。需要某种具体布局时，可以用 css-generator.html
生成。 - 更改了命名规则，使其能见名知意。详细命名规则请阅读 css-generator.html
使用说明
- 在页面中引入 grids-min.css 或 reset-grids-min.css
- 利用生成工具 css-generator.html, 生成需要的布局样式。
- 所有布局的 DOM 结构是一样的，可参考 grids-taobao.html
- 在布局的 className 中添加
layout grid-sXm0eY
欢迎使用和提出宝贵的建议。
December 7th, 2009 on 9:15
还没有尝试过珊格化布局,学习了!一直有个疑问,用珊格化布局,美工设计页面效果图的时候是否也要考虑到珊格化呢?
December 7th, 2009 on 10:24
尽量要考虑了，否则设计稿很难被栅格化。
December 7th, 2009 on 10:24
这个本身就是前端开发，当然包括美工啦，我想这个不论是设计师还是前端程序员，都需要熟悉，否则在工作衔接上就会出问题。
December 8th, 2009 on 13:12
双飞翼的确是个好方法，我采用这种方法做过两个小门户，但是发现某些时候（IE6/7），当编写好静态页预览时，偶尔会出现的错位的问题。
比如两栏：grid-s6m0，col-sub这部分就会贴到浏览器的左侧边缘。大概发现过3次，奇特的是有时候鼠标在col-sub上面晃动，有时候col-sub就会跑回它应该在的位置了，而且这样的情况比较偶然，遇到后再去刷新页面页面也变正常了。如果col-sub和col-main里面没有东添加任何的元素或者内容，好像是不会产生这个问题。由于时间有限并且这种情况是偶然发生，所以没有找到出现这个现象真正的原因。所以目前改用最常用的float布局了。。
有些啰嗦，再总结一次，ie下面出现这个情况，我猜测的原因：
1.可能col-sub和col-main里面包含的div有浮动什么的导致。
2.好像页面载入慢的时候，比如载入多张大图的时候，好像也可能发生。
只是猜测，希望遇到此类情况的朋友探讨下。
December 8th, 2009 on 15:43
@ce: 可能是 position: relative 引起的。新的方案里，已经去掉 relative, 仅在三栏布局的某些情况下需要。这种怪异问题应该不会再出现。
December 9th, 2009 on 9:58
收藏了，现在还是学习阶段，不发表意见……
December 11th, 2009 on 11:59
class=”grid-s5m0″ 不能定义宽度吗？只能依靠外层div定义宽度吗？
当grid-s5m0定义宽度后在IE6下出现左侧col-sub不可见现象。
如果这样无形中增加了一个层次。
December 11th, 2009 on 14:44
@carter: 可以定义宽度。但需要同时将 main-wrap 的宽度 100% 改成实际宽度值。否则 ie6 下，对 100% 的理解 bug，会导致 col-sub 定位不对而不可见。
January 5th, 2010 on 15:34
lifesinger 你MSN多少 加下我 andykeh@yahoo.cn 请教问题
January 19th, 2010 on 21:24
发现我使用标题ICON时，IE7和FF会有差异（上下相差1至2个PX）FF和IE6一样；发现主要是reset里的font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;字体引起的？？？ 不知道有什么好的解决方案
March 3rd, 2010 on 11:09
还没用过，学习了~~
April 23rd, 2010 on 12:54
我有时候碰到一些问题，搜不到答案。也找到其他联系方式。所以我只能在评论里面请教你了。我前几天看OOcss，templates.css里有这么一句。我不懂那个extends，CSS有那个属性吗？
.page{margin: 0 auto; width: 950px;_text-align:left;}
.liquid{extends:.page; width: auto;margin:0;}
希望您帮我解答一下。谢谢！
April 23rd, 2010 on 20:35
to hi: css 没 extends 属性。OO CSS 里，是用这个来表示继承，写给自己看的，不是给浏览器解析的。
July 6th, 2010 on 9:48
你好 ！最近在看code.taobao.org时看见了 你的双飞翼栅格布局。但我发现有bug就是当你在col-main col-sub col-extra前和后加注释时 布局会出错！初步怀疑是:after消除浮动有关 还没有找到解决的办法
July 6th, 2010 on 10:10
在ie6.0 上 忘了
July 19th, 2010 on 16:50
讲的很细致，但还有一个问题没有涉及到。
margin 负边距用百分比算 W3Cschool上如果说“ 规定基于父元素的宽度的百分比的外边距。” 在FF，ie7,ie8下正常。
在IE6下是基于那个父亲呢？ie6真变态 ，如果 100%它又正常了。只要小于百分之百就不知道到底父亲是那一个了。希望楼主给于解答。。。。。。
fghfghfgh
这个是负边距的
July 21st, 2010 on 14:02
@textbox 在IE6下,要再向外包一层.
demo: http://www.jimzhan.com/demo/Flow_Layout.html
leave a reply