[ 好文分享 ] CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）

qujian 发布于2019-08-28 18:14 / 3148人阅读

摘要：圣杯布局很好很巧妙的布局方式，每次都要翻看一下，干脆转过来转自最终效果左侧栏固定宽度，右侧自适应主内容栏自适应宽度侧边栏固定宽度右侧栏固定宽度，左侧自适应主内容栏自适应宽度侧边栏固定宽度左中右三栏

圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆转过来

转自：http://my.oschina.net/jsan/blog/368543

最终效果：

左侧栏固定宽度，右侧自适应

html:


    
        主内容栏自适应宽度
    
 
    
        侧边栏固定宽度

css:

.bd-lft {
    zoom:1;
    overflow:hidden;
    padding-left:210px;
}
.bd-lft .aside {
    float:left;
    width:200px;
    margin-left:-100%; /*= -100%*/
 
    position:relative;
    left:-210px; /* = -parantNode.paddingLeft */
    _left: 0; /*IE6 hack*/
}
.bd-lft .main {
    float:left;
    width:100%;
}

右侧栏固定宽度，左侧自适应

html:


    
        主内容栏自适应宽度
    
 
    
        侧边栏固定宽度

css:

.bd-rgt {
        zoom:1;
        overflow:hidden;
        padding-right:210px;
    }
    .bd-rgt .aside {
        float:left;
        width:200px;
        margin-left:-200px; /* = -this.width */
 
        position:relative;
        right:-210px; /* = -parantNode.paddingRight */
    }
    .bd-rgt .main {
        float:left;
        width:100%;
    }

左中右三栏自适应

html:


    
        主内容栏自适应宽度
    

    
        侧边栏1固定宽度
    

    
        侧边栏2固定宽度

css:

 .bd-3-lr {
        zoom:1;
        overflow:hidden;
        padding-left:210px;
        padding-right:210px;
    }
    .bd-3-lr .main {
        float:left;
        width:100%;
    }
    .bd-3-lr .aside-1 {
        float: left;
        width:200px;
        margin-left: -100%;
 
        position:relative;
        left: -210px;
        _left: 210px; /*IE6 hack*/
    }
    .bd-3-lr .aside-2 {
        float: left;
        width:200px;
        margin-left: -200px;
 
        position:relative;
        right: -210px;
    }

都在左边，右侧自适应

html:


    
        主内容栏自适应宽度
    
 
    
        侧边栏1固定宽度
    
 
    
        侧边栏2固定宽度

css:

.bd-3-ll {
    zoom:1;
    overflow:hidden;
    padding-left:420px;
}
.bd-3-ll .main {
    float:left;
    width:100%;
}
.bd-3-ll .aside-1 {
    float: left;
    width:200px;
    margin-left: -100%;
 
    position:relative;
    left: -420px;
    _left: 0px; /*IE6 hack*/
}
.bd-3-ll .aside-2 {
    float: left;
    width:200px;
    margin-left: -100%;
 
    position:relative;
    left: -210px;
    _left: 210px; /*IE6 hack*/
}

都在右边，左侧自适应

html:


    
        主内容栏自适应宽度
    
 
    
        侧边栏1固定宽度
    
 
    
        侧边栏2固定宽度

css:

.bd-3-rr {
    zoom:1;
    overflow:hidden;
    padding-right:420px;
}
.bd-3-rr .main {
    float:left;
    width:100%;
}
.bd-3-rr .aside-1 {
    float: left;
    width:200px;
    margin-left: -200px;
 
    position:relative;
    right: -210px;
}
.bd-3-rr .aside-2 {
    float: left;
    width:200px;
    margin-left: -200px;
 
    position:relative;
    right: -420px;
}

最终代码：

云服务器 GPU云服务器圣杯布局 css布局 css布局教程学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111111.html

几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

荆兆峰 2019-08-29 17:13 评论0 收藏0
前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0