简单的实现 css 圣杯布局

圣杯布局：左右固定中间自适应
<div class="page">
        <div class="left">
          1
        </div>
        <div class="middle">
          2      
        </div>
        <div class="right">
          3
        </div>
  </div>
<style>
/* css 布局 */
.page{padding-left:200px;padding-right:200px;} /*左右加固定边距*/
.left{float: left;width: 200px;background: #ddd;margin-left: -200px;
} /*设置宽度后，marin 再扣除。*/
.middle{float: left;background: #666;width: 100%;}
.right{float: left;width: 200px;background: #000;margin-right:-200px }
</style>
<style>
/* flex布局 */
.page{display: flex;}
.left{width: 200px;background: #ddd;
}
.middle{background: #666;flex: 1;}
.right{width: 200px;background: #000;}
</style>