三列布局-左右固定,中间自适应

HTML结构:
111
111
111

【三列布局-左右固定,中间自适应】1 . 利用flexbox
.contain{ display:flex; } .left{ float:left; width:100px; background:red; } .right{ float:right; width:100px; background:yellow; } .mid{ flex:1; background:green; }

2 . 利用float和absolute
.contain{ position:relative; } .left{ float:left; width:100px; background:red; } .right{ float:right; width:100px; background:yellow; } .mid{ position:absolute; left:100px; right:100px; background:green; }

3 . 利用float和overflow形成BFC
111
111
111
.left{ float:left; width:100px; background:red; } .right{ float:right; width:100px; background:yellow; } .mid{ background:green; overflow:hidden; }

利用overflow时中间元素必须放到最后

    推荐阅读