欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS布局终极方案之改进圣杯布局(兼容IE6+,现代浏览器)_html/css_WEB-ITnose

程序员文章站 2022-05-12 17:19:23
...

CSS兼容所有浏览器(IE6+,现代浏览器)的终极布局方案之 -- 改进版圣杯布局

改进思想:

通过对主内容区main增加一个额外包裹层div,将原来在父节点上的 padding-left|right 设置转移到包裹层上使用 margin-left|right 替代,达到更加灵活的布局设置。

原始圣杯布局实现:

同样的效果:

CSS 和 DOM 代码如下:

改进版圣杯布局
头部

主内容栏自适应宽度

侧边栏固定宽度

主内容栏自适应宽度

侧边栏固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

主内容栏自适应宽度

侧边栏1固定宽度

侧边栏2固定宽度

底部