猫眼面试

1、三列布局（毕问题）:左右宽度固定，中间自适应

flex布局（超级简单易用）

html:
<div id="container">
  <div class="left">e</div>
  <div class="main">jddhfg</div>
  <div class="right">d</div>
</div>

css:
#container{ display:flex;}
.left{ width:300px; background:red;}
.right{ width:300px; background:green;}
.main{ flex:1;}

1、自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后margin撑开距离。（注意设置屏幕的最小宽度，防止右div被挤下去）

  <div class="left">e</div>
  <div class="right">d</div>
  <div class="main">f</div>

.left{ float:left;width:200px;background:red;}
.right{ float:right;width:200px;background:red;}
.main{ margin:0 200px;background: