传统布局

注意：需要添加最小宽度

1.两列布局 :左边固定，右边自适应

• 定位

    <div class="con">
        <div class="left">111111</div>
        <div class="right">22222222222</div>
    </div>

 html { height: 100%; }
  .left {
            position: absolute;
            width: 300px;
            height: 100%;
            background-color: lightblue;
        }

        .right {
            position: absolute;
            /*容纳块公式*/
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin-left: 300px;
            background-color: lightgreen;
        }

• 浮动

  <div class="con">
        <div class="right">
            <div class="c"> 22222222222</div>
        </div>
        <div class="left">111111</div>

        html { height: 100%; }
        .left {
            float: left;
            width: 300px;
            height: 100%;
             /*实现原理：浮动元素必须尽可能高的放置*/
            margin-left: -100%;
        }
          .right {
            float: left;
            width: 100%;
            height: 100%;
        }

        .c {
            margin-left: 300px;
            height: 100%;
        }

2.三列布局：左右固定，中间自适应

• 双飞翼布局

    <div class="con">
        <div class="middle">
            <div class="c">2222222222222222222222 </div>
        </div>
        <div class="right">33333333333333</div>
        <div class="left">111111</div>
    </div>

        .left,
        .right {
            float: left;
            height: 100%;
        }

        .left {
            width: 300px;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            margin-left: -200px;
        }

        .c {
            /*子盒设置margin拉开距离*/
            margin-left: 300px;
            margin-right: 200px;
        }

• 圣杯布局

 <div class="con">
        <div class="middle">
            2222222222222222222222
        </div>
        <div class="right">
            33333333333333
        </div>
        <div class="left">111111</div>
    </div>

        .con {
            height: 100%;
            /*利用padding拉开距离*/
            padding-left: 300px;
            padding-right: 200px;
        }

        .middle {
            width: 100%;
            height: 100%;
            float: left;
        }

        .left,
        .right {
            /*定位，回到最初位置*/
            position: relative;
            float: left;
            height: 100%;
        }

        .left {
            width: 300px;
            margin-left: -100%;
            left: -300px;
        }

        .right {
            width: 200px;
            margin-left: -200px;
            right: -200px;
        }