圣杯布局,双飞翼布局

圣杯布局也叫双飞翼布局，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。

直接上代码

html结构

<div class="content">
        <div class="left">
            左侧固定
        </div>
        <div class="center">
            中间自适应
        </div>
        <div class="right">
            右侧固定
        </div>
</div>

 

css样式

<style>
  .content {
        padding: 0 200px;
        height: 200px;
        min-width: 200px;
  }
  .left {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
        margin-left: -200px;
   }
  .right {
        width: 200px;
        height: 200px;
        background: yellow;
        float: right;
        margin-right: -200px;
   }
  .center {
        width: 100%;
        min-width: 200px;
        height: 200px;
        background: green;
        float: left;
   }
</style>