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

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

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

第一种：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; 
        }