css实现三栏布局

1.float布局

左右两栏设置float属性使其脱离文档流：左边栏设置 float:left, 右边栏设置float: right

.left{
    float: left;
    width: 300px;
    height: 150px;
    background: red;
}
.center{
    margin-left: 300px;
    margin-right: 300px;
    background: yellow;
}
.right{
    float: right;
    width: 300px;
    height: 150px;
    background: green;
}

<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>    

2.poition定位

给左中右都使用 absolute绝对定位，给其父元素添加 position:relative, 则这三个子元素可以相对于父元素进行绝对定位。

.left{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: red;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: yellow;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: green;
}

3.flex模型

给元素设置display:flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列。

.main {
    display: flex;
}
.left{
    width: 400px;
    background: red;
}
.center{
    background: yellow;
}
.right{
    background: green;
    width: 400px;
}