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固定宽度
底部