圣杯布局总结

css布局总结

1.三列式‘圣杯布局’：思路 一个盒子了有三个子盒子都浮动起来，然后利用负边距把sub和extra 定位到main的左右，用定位属性实现！

圣杯布局的优点总结

如下：

1.使主要内容列先加载。

2.允许任何列是最高的。

3.没有额外的div。

4.需要的hack很少。

body{min-width:600px;//作当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：}

.con{padding-left:10%;padding-right:8%;}

.main{float:left;width:100%;height:200px;background:#C60;}

.sub{width:10%;height:200px;float:left;background:#06F;position: relative;left:-10%;margin-left: -100%;}

.extra{width:8%;height:200px;float:right;background:#0F6;position: relative;right:-8%;margin-left:-90%;}

     

   

   

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

.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%;}

 

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

.bd-rgt{

zoom:1;

overflow:hidden;

padding-right:210px;

}

.bd-rgt .main{

float:left;

width:100%;

}

.bd-rgt .aside{

float:left;

width:200px;

position:relative;

right:-210px;

margin-left:-200px;

}

/* 左中右 三栏自适应 */

.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;

}

/* 都在右边，左侧自适应 */

.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;

rightright: -210px;

}

.bd-3-rr .aside-2 {

float:left;

width:200px;

margin-left: -200px;

position:relative;

rightright: -420px;

}