圣杯布局 & 双飞翼布局

圣杯布局
方法一：

        .container{
            position:relative;
        }
        .middle{
            background-color: deeppink;
            width:100%;
            height:200px;
            box-sizing:border-box;
            padding:0 200px;
        }
        .left{
            background-color: yellow;
            width:200px;
            height:200px;
            position:absolute;
            left:0;
            top:0;
        }
        .right{
            background-color: pink;
            width:200px;
            height:200px;
            position:absolute;
            right:0;
            top:0;
        }

<div class='container clearfix'>
  <div class='middle'>
      <h4>中间弹性区</h4>
  </div>
  <div class='left'>
      <h4>左边栏</h4>
  </div>
  <div class='right'>
      <h4>右边栏</h4>
  </div>
</div>

两栏布局：

方法一：

.two-columns{
            width:100%;
            height:200px;
            background-color: yellow;
            position:relative;
        }
  .tw-left{
            width:200px;
            height:200px;
            background-color: pink;
            position:absolute;
            left:0;
            top:0;
  }
   .tw-container{
            width:100%;
            height:200px;
            background-color: grey;
            padding-left:200px;
    }

方法二：

      .tw-left{
    	    background-color: yellow;
            height:200px;
            width: 200px;
            float: left;
            }
        .tw-container{
            background-color: red;
            height:200px;
            margin-left: 200px;
        }

方法三：

.two-columns{
            display:flex;
        }
         .tw-left{
            height:200px;
            background-color: yellow;
            width:200px;
            }
        .tw-container{          
            height:200px;
            background-color: red;
            flex:1;
        }

<div class='two-columns '>
  <div class='tw-left'>
      <h4>左边栏</h4>
  </div>
  <div class='tw-container'>
      <h4>主要内容区</h4>
  </div>
</div>