css列布局整理

阅读更多

对一些经典的布局进行整理，以及修改去除不必要的hack，兼容 gecko,ie6,7,webkit

1。经典负边距布局效果

演示

2.eric 的不依赖DOM结构的灵活 列 布局

演示

 

3.经典等高列

演示

 

4.修改版等高列的圣杯布局

去除大量的针对 ie hack，以负边距和相对定位重新定位列

演示

5.伪绝对定位布局

演示

6.五列伪绝对定位布局变体

演示

 

 

7.09暑期实习某互联网公司笔试题

出的不错！

描述：

设计师交给A去实现一个布局，这个布局由三列等高的区域组成，左栏的宽度为40%-102px，中栏的宽度为200px，右栏的宽度为60%-102px。左中栏、右中栏之间的间隔均为2px。

一开始A觉得实现这样的布局根本不用花费什么功夫，可是具体实现的时候，却发现远没有想象中那么简单。Web标准、浏览器兼容性……各种需要考虑的细节都让A觉得自己陷入了麻烦之中。

效果：
演示@google code

 

源码出处