CSS布局

布局前应对原有样式进行清除 body{margin:0;padding:0;}

一列布局：

　　定宽（定高）然后margin:0 auto;使其居中

两列布局：

　　父块同一列布局；子块一列左浮、一列右浮

三列布局：

自适应三列布局：

.left{width:33.33%;height:500px;background-color:#ccc;float:left}
.middle{width:33.33%;height:500px;background-color:#999;float:left}
.right{width:33.33%;height:500px;background-color:#ddd;float:right}

两边定宽，中间根据内容自适应的三列布局：

.left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0;}
.right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0;}
/*如下为三列无缝拼接*/
.middle{height:500px;background:#999;marign:0 300px 0 200px;}
/*如下为左右距离中间均有10px间距*/
.middle{height:500px;background:#999;margin:0 310px 0 210px;}

混合布局：

　　在一列布局基础上改动即可，两列、三列布局均可混合使用