常见的三狼布局

html有个很常用的的布局，三狼（不是撸啊撸里面的三狼 ）， 而是一二三的栏， 不仅是三栏，四栏五栏都一样的思路~~

方法一： 利用CSS的flex布局，在支持CSS3的浏览器或者手机端上的时候可以使用该方法，毕竟CSS3的代码量要少~

查看demo

<style>
.box {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis：100px;
    -webkit-flex-basis: 100px;
    background-color: red;
    height: 100%;
}
.right {
    flex-basis：100px;
    -webkit-flex-basis: 100px;
    background-color: red;
    height: 100%;
}
.center {
    background-color: blue;
    height: 100%;
    flex-grow: 1;
}
</style>

<div class='box'><div class='left'></div> <div class='center'></div> <div class="right"></div></div>

方法二：利用position的定位，中间内容marin左右的距离。

查看demo

<style>
.left {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
}
.center {
    width: 100%;
    height: 200px;
    margin: 0 200px;
    background-color: blue;
}
</style>

<div class='left'></div> <div class='center'></div> <div class="right"></div>

方法三：利用float浮动，让中间元素随着元素浮动一起浮动， 不要被清浮动就好~

查看demo

<style>
.left {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    float: right;
    background-color: red;
}
.center {
    width: 100%;
    height: 200px;
    background-color: blue;
}
</style>

<div class='left'></div><div class="right"></div><div class='center'></div>

三栏的布局有很多种方式，熟悉几种常用的兼容性好的就可以了~~