射雕双飞翼布局的几个补充布局

日期：2013-11-29  来源：攀枝花惠康网络公司

前段时刻一向在开发css框架，同事提醒我看射雕的双飞翼结构，很是不错的一个结构，引用射雕自己的话：

1.实现了内容与结构的分手，即Eric提到的Any-Order Columns.
2.main部媒崆自顺应宽度的，很轻易在定宽结构和流体结构中切换。
3.任何一栏都可所以最高栏，不会出问题。
5.在浏览器上的兼容性很是好，IE5.5以上都撑持。

那么事实什么是双飞翼结构呢？巨匠可以看看；

渐进增强式结构切磋（上） 渐进增强式结构切磋（下） 网页栅格系统研究（4）：手艺实现

其实近似这种结构国外有人很早也做了，统一个html文档经由过程css样式能做出40种分歧的结构揭示，当然甚至可以更多，搜罗我也曾经关注过，不外小我认为抉择网页结构的应该是信息架构，而不纯粹的依靠html文档流和css样式。

1，如不美观做像Blueprint一样的框架，就是950，24列的各类形式都要有的话，那么这个双飞翼栅格结构框架的代码不是一般的多，因为他转变太多，太矫捷了，这一点很是主要。射雕也在网页栅格系统研究（4）：手艺实现中写到:

2,这套结构合适渐进增强式工作流程。细心的你可能已经发现，所有两栏结构和三栏结构，HTML中的DOM结构是完全一样的，只有最外层div的class分歧。如不美观要交流摆布栏，只要很是简单的改削下class就可以;

今天细心的研究了射雕的双飞翼，自己在射雕demo的基本上，在3栏模式下做了一点扩展，这些结构在他的Grids Layout Demo中没有看到，所以今天做了几个填补结构：http://www.css88.com/demo/Grids%20Layout/cssA/to.html

射雕还专门做了个栅格化的双飞翼demo：Grids Layout Demo

回到CSS框架，双飞翼结构能做框架吗，毫无疑问他是可以的，可是会有以下几个问题：

4.需要的hack很是少（就一个针对ie6的断根浮动hack:_zoom: 1;）

这套栅格系统并不能实现所有结构。这和YUI Grids近似，只能实现预定的一些结构。好比三栏结构，今朝只插手了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情形，…对于统一个站点来说，太多分歧的三栏比例不是好事

3,经由过程两栏结构和三栏结构可以组合出多种结构。