css布局(单、双、三列布局)

一、单列水平居中布局

div{
    margin: 0 auto;
    height:  300px;
    width: 500px;
    background-color: #66ccff;
}

二、双列布局

(1)自适应（比较少用）

body{
    margin: 0;	/*清除默认样式*/
    padding: 0;
}
.wrapper{
    width: 800px;
    margin: 0 auto;
}
.left{
    width: 20%; /*要固定宽度的话，可以采用具体的像素值，如200px*/
    height: 500px;
    float: left;
    background-color: #66ccff;
}
.right{
    width: 80%;
    height: 500px;
    float: right;
    background-color: gray;
}

三、三列布局

.body{
    margin: 0;     /*清除浏览器默认样式*/
    padding: 0;
}
.left{
    width: 200px;
    height: 500px;
    background-color: red;
    
    position: absolute;
    left: 0;
    top: 0;
}
.middle{
    height: 500px;
    background-color: lightblue;
    margin: 0 310px 0 210px;
}
.right{
    width: 300px;
    height: 500px;
    background-color: gray;

    position: absolute;
    right: 0;
    top: 0;
}

更多三列布局

而利用前面的单列，双列和三列布局，我们可以搭配出混合布局，如在单列布局的div中，再放入单列布局的div和三列布局div。