HTML+CSS实现圣杯布局！

实现圣杯布局有2中方法：

1、flex布局：（推荐）

爸爸直接上代码:

    
header


    

        
left
    
    

        
middle
    
    

        
right
    


    
footer

下面是CSS代码：

html, body{ padding: 0; margin: 0;  text-align: center;}
header, footer{ border: 1px solid #333; background: #ccc;}
section{    display: flex;}
.left{  width: 200px;   background: red;}
.middle{    flex: 1;    background: green;}
.right{ width: 200px;   background: blue;}

2、浮动非主流（float）

HTML代码：需要把middle放在最前面

    
header


    

        
middle
    
    

        
left
    
    

        
right
    


    
footer

上样式：

html, body{
    padding: 0;
    margin: 0;
    text-align: center;
}
header, footer{
    border: 1px solid #333333;
    background: #CCCCCC;
}
footer{
    clear: both;
}
section{
    /* 给left和right空出位置 */
    padding: 0 200px 0 200px;
    overflow: hidden;
}
.left, .middle, .right{
    position: relative;
    float: left;
}
.middle{
    width: 100%;
    background: green;
}
.left{
    /* 让left回到上一行最左侧 */
    margin-left: -100%;
    /* 让left回到最左侧 */
    left: -200px;
    width: 200px;
    background: red;
}
.right{
    margin-left: -200px;
    right: -200px;
    width: 200px;
    background: blue;
}

下面是效果图，效果是一样的！

11221190629.png