圣杯布局学习总结

本文学习参考自：http://web.jobbole.com/84993/ 虽说对前端基本知识有一些了解但是对于CSS基本的布局“双飞翼”、“圣杯”还是没有做过专门的学习和研究，这次因为要完成IEF的相关任务来系统的学习总结下圣杯布局的相关方法。

一、左栏固定，右栏宽度自适应(右栏固定，左栏宽度自适应)

为什么把这两个布局放在一起呢？因为从本质上来看这两种布局方式原理是一样的，知识左右两侧交换了位置，下面一起来看看代码：

html结构

<div id="container">
    <div id="left">left content</div>
    <div id="main">center content</div>
</div>
复制代码

css样式

#container{
    padding-left:200px;
    text-align:center;
}
#left{
    width:190px;
    background-color:red;
    margin-left:-200px;
    float:left;
}
#main{
    background-color:yellow;
}
复制代码

这里首先给外部#container容器一个左内边距，这个内边距的距离正好是给左侧栏留出的空间，大小等于左侧边栏的负外边距的大小。之后为#left设置一个固定宽度，并让其左浮动使其与#main并排，但是这时会发现浏览器左侧会出现一个空白，出现空白的原因是因为我们为#container设置了左内边距；这时只要对#left设置一个负左外边距就可以解决这个问题了并且实现了一个左侧固定，右侧宽度自适应的布局。

二、左右栏固定中间自适应

这种布局方式应该是我们平时见得最多的了，下面就来看看具体的方法。

html结构

<div id="header">this is header</div>
<div id="container">
    <div id="left">left content left content left content left content left content</div>
    <div id="main"><p>this is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty good</p></div>
    <div id="right">right content</div>
</div>
<div id="footer">this is footer</div>
复制代码

css样式

#header{
    background-color:#ccc;
}
#footer{
    background-color:#ccc;
}
#container{
    padding-right:200px;
    padding-left:200px;
    text-align:center;
    }
#container:after{
    clear:both;
    content:"";
    visibility:hidden;
    display:block;
}
#left{
    width:190px;
    margin-left:-200px;
    background-color:red;
    float:left;
 }
#right{
    width:190px;
    float:right;
    background-color:green;
    margin-right:-200px;
}
#main{
    float:left;
    width:100%;   
    margin-right:-200px;    
    background-color:yellow;
}
复制代码

这里用到的方法也很简单，首先让#container为左右两栏留出距离也就是padding值，然后分别对#left和#main进行左浮动，对#right进行右浮动，分别设置左右两栏的margin值即可，这里需要注意的是清楚浮动问题，此处用到的是:after伪元素进行清除浮动(IE8以上)，除此之外还可以运用BFC的原理为#container设置overflow:hidden进行清除浮动。

三、两个侧边栏在左侧固定，右侧自适应（两个侧边栏在右侧固定，左侧自适应）

主要需要注意的就是#container的padding-left值。

html结构

<div id="header">this is header</div>
<div id="container">
    <div id="left1">left content left content left content left content left content</div>
    <div id="left2">right content</div>
    <div id="main">
    <p>this is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty goodthis is verty good</p>
</div>
</div>
<div id="footer">this is footer</div>
复制代码

css样式

#header{
    background-color:#ccc;
}
#footer{
    background-color:#ccc;
}
#container{
    padding-left:400px;
    text-align:center;    
}
#container:after{
    clear:both;
    content:"";
    visibility:hidden;
    display:block;
}
#left1{
    width:190px;
    margin-left:-400px;
    background-color:red;
    float:left;
    }
#left2{
    width:190px;
    float:left;
    background-color:green;
    margin-left:-200px;
}
#main{
    float:left;
    width:100%;   
    background-color:yellow;
}
复制代码

![效果图]](http://upload-images.jianshu.io/upload_images/2502640-514fe9bb7652306e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)