CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定，一个div自适应宽度。两种情况，固定在左或者在右。
HTML：
<div class="box1"> <div class="main"> 内容自适应宽度 </div> <div class="aside"> 侧栏固定宽度 </div> </div>
这两种情况的HTML排版顺序都是一样的。
CSS：
右边固定宽度：
.box1 { clear: both; overflow: hidden; padding-right: 110px;/*重要属性，这个值是侧栏的right值*/ } .box1 .main { width: 100%; height: 50px; line-height: 50px; background: deepskyblue; float: left; } .box1 .aside { height: 50px; line-height: 50px; width: 100px; background: skyblue; float: left; margin-right: -100px;/*重要属性，这个值是侧栏的宽度*/ position: relative; right: -10px;/*重要属性，这个值是自身离其它div的间隙，即10px*/ }
左边固定宽度：
.box2 { clear: both; overflow: hidden; padding-left: 110px;/*重要属性，这个值是侧栏的left值*/ } .box2 .aside { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性，设置-100%就能和内容栏同一行并覆盖内容栏*/ position: relative; left: -110px;/*重要属性，该值是自身宽度与间隙之和*/ } .box2 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
增加一个：只需要简单的几个属性就能达到这种效果：
html：
<div class="box1"> <div class="aside"> 侧栏固定宽度 </div> <div class="main"> 内容自适应宽度 </div> </div>
css：
.aside{ width:100px; float:left; } .main{ margin-left:100px; //这个值是aside的宽度 }
这一个是利用了float破坏流动性，使得div浮在页面上，后边的内容自动挤到最左边，然后设置右边div的margin值就能达到：左边固定宽度，右边自适应宽度的效果。同样，利用float破坏流动性的特点，也可以实现右边固定，左边自适应。
总结：如果固定宽度div在左边，那么它就设置margin：-100%，left值就设置比它宽度大的值，比如上面的left：-110，这样就有10px的间隙，然后装它们的盒子设置padding-left，这个的值和固定宽度div的left值相等。内容栏除了浮动和宽度100%，其它的都不用设置。固定宽度的div在右边的时候，就把left，margin-left，padding-left改成right，margin-right，padding-right就可以了。
2.两个固定宽度，一个自适应宽度
HTML：
<div class="box1"> <div class="main"> 内容自适应宽度 </div> <div class="aside1"> 侧栏1固定宽度 </div> <div class="aside2"> 侧栏2固定宽度 </div> </div>
这三种情况的HTML排版顺序也是一样的。
CSS：
两个固定宽度div都在右边：
.box1 { clear: both; overflow: hidden; padding-right: 240px;/*重要属性，这个值是两个侧栏宽度加每个的间隙的值，这里间隙每个是10px，所以100+120+10+10=240*/ } .box1 .aside1 { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -100px;/*重要属性，这个值是该div的宽度*/ position: relative; right: -10px;/*重要属性，这个值是自身间隙即10px*/ } .box1 .aside2 { width: 120px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -120px;/*重要属性，这个值是该div的宽度*/ position: relative; right: -120px;/*重要属性，这个值是该div左边的div的宽度与间隙，加上自身间隙的值，即100+10+10=120，不要理解为自身的宽度哦*/ } .box1 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
两个固定宽度都在左边：
.box2 { clear: both; overflow: hidden; padding-left: 240px;/*重要属性，这个值是两个div宽度与间隙之和*/ } .box2 .aside1 { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性，设置-100%能让该div和内容块成一行并覆盖*/ position: relative; left: -240px;/*重要属性，这个值是padding-left的值*/ } .box2 .aside2 { width: 120px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性，设置-100%能让该div和内容块成一行并覆盖*/ position: relative; left: -130px;/*重要属性，这个值是padding-left减去最左边div宽度与间隙的值*/ } .box2 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
一个固定宽度在左，一个固定宽度在右。自适应宽度在中间。
.box3 { clear: both; overflow: hidden; padding: 0 130px 0 110px;/*重要属性，这个值是左右两边div的宽度*/ } .box3 .aside1 { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性*/ position: relative; left: -110px;/*重要属性，这个值是自身宽度加上间隙*/ } .box3 .aside2 { width: 120px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -120px;/*重要属性，这个值是自身宽度*/ position: relative; right: -10px;/*重要属性，这个值是自身离其它div的间隙*/ } .box3 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
总结：两个div固定宽度的情况，还是只操作固定宽度的div，自适应宽度的不管它。在左边的div就设置margi-left：-100%，left就是宽度与间隙的值；右边的就设置margin-right：负自身宽度，相对定位的right就是宽度与间隙的值。
3.多个固定宽度，一个自适应宽度
HTML：
<div class="box1"> <div class="main"> 内容自适应宽度 </div> <div class="aside1"> 侧栏1固定宽度 </div> <div class="aside2"> 侧栏2固定宽度 </div> <div class="aside3"> 侧栏3固定宽度 </div> </div>
三种情况的HTML排版顺序也一样。
CSS：
三个固定宽度div在最右边，自适应宽度div在左边
.box1 { clear: both; overflow: hidden; padding-right: 390px;/*重要属性，该值是每个div宽度与间隙之和*/ } .box1 .aside1 { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -100px;/*重要属性，该值是该div的宽度*/ position: relative; right: -10px;/*该值是自身离其它div的间隙*/ } .box1 .aside2 { width: 120px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -120px;/*重要属性，该值是该div的宽度*/ position: relative; right: -120px;/*该值是该div的左边div宽度与间隙，加上自身间隙的值，即100+10+10=120*/ } .box1 .aside3 { width: 140px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -140px;/*重要属性，该值是该div的宽度*/ position: relative; right: -250px;/*该值是该div的左边div宽度与间隙，加上自身间隙的值，即100+10+120+10+10=250*/ } .box1 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
两个固定宽度div在最左边，另一个在最右边，自适应宽度div在最中间
.box2 { clear: both; overflow: hidden; padding: 0 150px 0 240px;/*重要属性，左边的padding是两个div的宽度与间隙之和，右边的是一个div宽度与间隙之和*/ } .box2 .aside1 { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性*/ position: relative; left: -240px;/*重要属性，由于该div是在最左边的，所以left值是padding的left的值*/ } .box2 .aside2 { width: 120px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性*/ position: relative; left: -130px;/*重要属性，该值是padding的left的值减去最左边的div宽度与间隙的值*/ } .box2 .aside3 { width: 140px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -140px;/*重要属性，该值是该div宽度与间隙的值*/ position: relative; right: -10px;/*重要属性，由于设置了margin-right之后，该div到了最右边，所以这里的right值是间隙值*/ } .box2 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
一个固定宽度div在左边，另外两个在最右边，自适应宽度在中间
.box3 { clear: both; overflow: hidden; padding: 0 280px 0 110px;/*重要属性，padding的right值是右边两个div宽度与间隙的和；padding的left值是左边的div宽度与间隙的和*/ } .box3 .aside1 { width: 100px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-left: -100%;/*重要属性*/ position: relative; left: -110px;/*重要属性，该值是该div宽度与间隙的值*/ } .box3 .aside2 { width: 120px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -120px;/*重要属性，该值是该div宽度*/ position: relative; right: -10px;/*重要属性，由于设置了margin-right，所以该值是间隙值*/ } .box3 .aside3 { width: 140px; height: 50px; line-height: 50px; background: skyblue; float: left; margin-right: -140px;/*重要属性，该值是该div宽度*/ position: relative; right: -140px;/*重要属性，该值是它紧邻的左边的div的宽度与间隙还有自身与div间隙的和，即120+10+10=140*/ } .box3 .main { height: 50px; line-height: 50px; width: 100%; background: deepskyblue; float: left; }
总结：多个div固定宽度，一个自适应的布局方式和两个固定宽度，一个自适应的布局方式也是同样的原理，只操作固定的div，自适应的不管，然后设置装它们的盒子的padding值。固定宽度div设置相对定位的left或者right值，设置margin-left或者margin-right的值。
圣杯布局最终总结：
1.HTML排版都是自适应div在最前面，然后是固定宽度div。
2.都设置float：left。
3.如果div在左边，则该div设置margin-left：-100%。如果div在右边，则该div设置margin-right：负自身宽度
4.在左边的div设置相对定位的left值，如果是一个div，则该值是padding-left的值，也就是该div宽度与间隙之和的负值。如果左边是多个div，那么当前div的left值就是它右边所有的div的宽度与间隙的和再加上自身的宽度与间隙的值的负值。
5.在右边的div设置相对定位的right值，该值是自身的间隙的负值。如果右边是多个div，那么当前div的right值就是它左边所有的div的宽度与间隙的和再加上自身的间隙的值的负值。
6.这些div的外层的大盒子设置padding值，这个值是左边或者右边div的宽度与间隙的和。例如左边一个固定宽度的div，宽度为50，间隙是15；然后右边两个固定宽度的div，宽度分别是80、100，间隙都是10.那么padding值就应该设置为padding：0 200px 0 65px;
7.自适应div的宽度设置为100%，其它的都不用管。
