常见的几种三栏布局

1.定位

// 左右栏定宽   中间宽度自适应
  <style>
        .left{
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .right{
            float: right;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .middle{
            height: 300px;
            margin: 0 300px 0;
            background-color: blue;
        }
    </style>

      <!-- 1,float +  margin   同理可换成绝对定位-->
    <div class="con2">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </div>

2.flex布局

<style>
       .con3 .left,
        .con3 .right {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .con3 .middle {
            background-color: blue;
            flex: 1;
        }
</style>
 <div class="con3">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>

圣杯布局

<style>
.con4{
            height:300px;
            padding:0;
            margin:0;
        }
        .con4 div{
            float:left;
            position: relative;
        }
        .con4{
            padding:0 300px 0;
        }
        .con4 .left,
        .con4 .right{
            width:300px;
            height:300px;
            background-color:red;
        }
        .con4 .left{
            margin-left:-100%;
            left:-300px;
        }
        .con4 .right{
            margin-left:-300px;
            right:-300px;
        }
        .con4 .middle{
            width:100%;
            height:300px;
            background-color:blue;
        }
</style>
    <!-- 4,圣杯布局  利用到float 负边距  position:relative -->
    <div class="con4">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

4.双飞翼布局

<style>
.con5{
            margin:0;
            padding:0;
            height:300px;
        }
        .con5 .col{
            height:100%;
            float:left;
        }
        .con5 .middle-wrap{
            width:100%;
            height:100%;
            background-color:blue;
        }
        .con5 .middle-inner{
            margin:0 300px 0;
            height:100%;
        }
        .con5 .left,
        .con5 .right{
            width: 300px;
            height:300px;
            background-color:red;
        }
        .con5 .left{
            margin-left: -100%;
        }
        .con5 .right{
            margin-left:-300px;
        }
</style>
  <!-- 5，双飞翼布局 -->
    <div class="con5">
        <div class="middle-wrap col">
            <div class="middle-inner">middle</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>