两栏布局

左边固定右边自适应

• 使用float布局

/*HTML*/
<div class="left">我是左边</div>
<div class="right">我是右边</div>

/*CSS*/
 .left{
            float: left;
            width: 200px;
            background-color: #0074D9;
        }
 .right{
            margin-left: 200px;
            background-color: #954121;
        }

• 使用position布局

/*HTML*/
<div class="left">我是左边</div>
<div class="right">我是右边</div>
/*CSS*/
.left{
            position: absolute;
            left: 0;
            width: 200px;
            background-color: #0074D9;
        }
        .right{
            margin-left: 200px;
            background-color: #954121;
        }

三栏布局

左右两边固定中间自适应

• 使用flex布局

/*HTML*/
<div class="wrap">
    <div class="left">我是左边</div>
    <div class="middle">我是中间</div>
    <div class="right">我是右边</div>
</div>
/*CSS*/
       .wrap{
            display: flex;
        }
        .middle{
            width: 100%;
            background-color: #7f7f7f;
        }
        .left{
            width: 200px;
            background-color: #0074D9;
        }

        .right{
            width: 200px;
            background-color: #954121;
        }

• 使用position/float+margin进行布局

 /*HTML*/
        <div class="left">我是左边</div>
       <div class="middle">我是中间</div>
       <div class="right">我是右边</div>
/*CSS*/
        .middle{
            margin: 0 200px;
            background-color: #7f7f7f

        }
        .left{
            width: 200px;
            background-color: #0074D9;
           float: left;
          /*
          position:absolute;
          left:0;
          */
        }

        .right{
            width: 200px;
            background-color: #954121;
           float: right;
           /*
          position:absolute;
         right:0;
          */
        }

• 圣杯布局(position+float+margin负值）

/*HTML*/
<div class="wrap">
       <div class="middle">我是中间</div>
       <div class="left">我是左边</div>
       <div class="right">我是右边</div>
   </div>
/*CSS*/
       .wrap > div{
            float: left;
        }
       .wrap{
           padding: 0 200px;
       }
        .middle {
            width: 100%;
            background-color: #7f7f7f

        }

        .left {
            width: 200px;
            background-color: #0074D9;
           margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .right {
            width: 200px;
            background-color: #954121;
            margin-left: -200px;
            position: relative;
           right: -200px;
        }

• 双飞翼布局（margin+float）

/*HTML*/
 <div class="wrap">
        <div class="middle">我是中间</div>
    </div>
    <div class="left">我是左边</div>
    <div class="right">我是右边</div>
/*CSS*/
        .wrap {
            width: 100%;
            float: left;
        }

        .middle {
            background-color: #7f7f7f;
            margin: 0 200px;

        }

        .left {
            float: left;
            width: 200px;
            background-color: #0074D9;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 200px;
            background-color: #954121;
            margin-left: -200px;
        }