## 三栏布局 **三栏布局**\- 左右容器固定，中间容器自适应 ``` <div class="container"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div> ``` - **第一种方式：flex** ``` .container{ display: flex; } .left{ flex-basis:200px; background: green; } .main{ flex: 1; background: red; } .right{ flex-basis:200px; background: green; } ``` - **第二种方式：position + margin** 左右设置position: absolute和宽度，中间margin：0 200px ``` .left,.right{ position: absolute; top: 0; background: red; } .left{ left: 0; width: 200px; } .right{ right: 0; width: 200px; } .main{ margin: 0 200px ; background: green; } ``` - **第三种方式 float + margin** 左右设置浮动和宽度，中间margin：0 200px ``` .left{ float:left; width:200px; background:red; } .main{ margin:0 200px; background: green; } .right{ float:right; width:200px; background:red; } ```