左右定宽，中间自适应，实现三列布局

左右定宽，中间自适应，实现三列布局

今天想说的是一个左右定宽，中间自适应，实现三列布局，我也总结了以下，主要有以下几种：
废话不多说，直接上代码：

第一种：float

<!--html--><div id="left"><span>left</span></div><div id="right"><span>right</span></div><div id="middle"><span>middle</span></div>

//css#left{    float: left;    background-color: red;    width: 150px;    height: 50px;}#right {    float: right;    background-color: yellow;    width: 200px;    height: 50px;}#middle {    margin: 0 200px 0 150px;    width: 100%;    background-color: #fff9ca;    height: 50px;}

第二种：BFC

<!--html--><div id="left"><span>left</span></div><div id="right"><span>right</span></div><div id="middle"><span>middle</span></div>

//css#left {    background-color: red;    width: 150px;    height: 50px;    float: left;}#right {    background-color: yellow;    width: 200px;    height: 50px;    float: right;}#middle {    background-color: #fff9ca;    height: 50px;    overflow: hidden;}

第三种：双飞翼布局

<!--html--><div class="grid">    <div id="middle">        <div id="middle-span"><span>middle</span></div>    </div>    <div id="left"><span>left</span></div>    <div id="right"><span>right</span></div></div>

//css#middle {    float: left;    background-color: #fff9ca;    width: 100%;    height: 50px;}#middle-span {    margin: 0 200px 0 150px;}#left {    float: left;    position: relative;    background-color: red;    width: 150px;    margin-left: -100%;    height: 50px;}#right {    float: left;    position: relative;    background-color: yellow;    width: 200px;    margin-left: -200px;    height: 50px;}

第四种：flex

<!--html--><div class="flex">    <div id="left"><span>left</span></div>    <div id="middle"><span>middle</span></div>    <div id="right"><span>right</span></div></div>

//css        .flex {            display: flex;            flex-flow: row;        }        #left {            background-color: red;            width: 150px;            height: 50px;        }        #middle {            background-color: #fff9ca;            flex: 1; /* flex中宽度自适应使用该属性，使用100%时其他列的固定宽度会出现问题*/            height: 50px;        }        #right {            background-color: yellow;            width: 200px;            height: 50px;        }