圣杯布局和双飞翼布局

目的

中间栏div内容不被遮挡

圣杯布局

为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

html代码

    
    


    

        

            中
        
        

            左
        
        
右
    

css代码

*{
    margin:0;
    padding:0;
}
div{
    height:150px;
}
.left{
    background: orange;
    float:left;
    width: 300px;
    
    margin-left:-100%;
}
.right{
    float:left;
    background: blue;
    width: 200px;
    
    margin-left:-200px;
}
.middle{
    background: yellow;
    float:left;
    width: 100%;
}
.middle .inner{
    /*margin-left:300px;*/
}
.container{
    padding-left:300px;
    padding-right:200px;
}

开始效果

alt 开始效果

优化css实现圣杯布局

*{
    margin:0;
    padding:0;
}

div{
    height:150px;
}
.left{
    background: orange;
    float:left;
    width: 300px;
    margin-left:-100%;
    
    position:relative;
    left:-300px;
}
.right{
    float:left;
    background: blue;
    width: 200px;
    margin-left:-200px;
    
    position:relative;
    left:200px;
}
.middle{
    background: yellow;
    float:left;
    width: 100%;
}
.middle .inner{
    /*margin-left:300px;*/
}
.container{
    padding-left:300px;
    padding-right:200px;
}

中间效果

alt 中间效果

*{
    margin:0;
    padding:0;
}
div{
    /*height:300px;*/
}
.left{
    float:left;
    width: 300px;
    background:orange;
    margin-left:-100%;
    position: relative;
    left:-300px;
}
.right{
    float:right;
    background:red;
    width: 200px;
    margin-left:-200px;
    position: relative;
    left:200px;
}
.middle{
    float: left;
    width: 100%;
    background: blue;
}
.left,.right,.middle{
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.container{
    padding-left:300px;
    padding-right:200px;
    overflow: hidden;
}

最终效果

alt 最终效果

双飞翼布局

为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

html

    

        

            中
        
    
    

        左
        

            第二行
        
    
    
右

css

*{
    margin:0;
    padding:0;
}
div{
    /*height:300px;*/
}
.left{
    float:left;
    width: 300px;
    background:orange;
    margin-left:-100%;
}
.right{
    float:right;
    background:blue;
    width: 200px;
    margin-left:-200px;
}
.middle{
    float: left;
    width: 100%;
    background: yellow;
}
.middle .inner{
    margin-left:300px;
}
.left,.right,.middle{
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.container{
    /*padding-left:300px;
    padding-right:200px;
    overflow: hidden;*/
    overflow: hidden;
}

双飞翼效果

alt 最终效果