My Book

双飞翼实现机制

方法1:利用浮动

    <div class="wrap">
        <div class="header">我是头部</div>
        <div class="body">
            <div class="main">
                <div class="main-inner">我是中路</div>
            </div>
            <div class="sub">我是左边</div>
            <div class="extra">我是右边</div>
        </div>
        <div class="footer">我是脚部</div>
    </div>

    ---css样式
    html,
    body,
    div {
      padding: 0;
      margin: 0;
    }
    .header,
    .footer {
      width: 100%;
      height: 40px;
      background: #ccc;
      border: 1px solid #000;
    }
    .body .main {
      float: left;
      width: 100%;
      background: pink;
      min-height: 200px;
    }
    .body .main .main-inner {
      margin: 0 220px;
    }
    .body .sub {
      float: left;
      background: yellowgreen;
      margin-left: -100%;
      width: 220px;
      min-height: 200px;
    }
    .body .extra {
      float: left;
      background: orange;
      margin-left: -220px;
      width: 220px;
      min-height: 200px;
    }
    .footer {
      clear: both;
    }

方法2:利用c3

        <div class="container">
            <div class="middle">我是中路</div>
            <div class="left">我是上路</div>
            <div class="right">我是下路</div>
        </div>

        --样式
    .container {
        display: -webkit-box;
    }
    .left {
        width: 250px;
        background: greenyellow;
        -webkit-box-ordinal-group: 1;
    }
    .right {
        width: 250px;
        background: orange;
        -webkit-box-ordinal-group: 3;
    }
    .middle {
        -webkit-box-flex: 1;
        background: pink;
        -webkit-box-ordinal-group:2;
    }

方法3:利用position

    <div class="content">
        <div class="center-ct">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    ---css样式
    html,body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .content {
        width: 100%;
        height: 100%;
        position: relative;
        background: #cff;
    }
    .left {
        width: 200px;
        height: 100%;
        background: #0f0;
        position: absolute;
        left: 0;
        top: 0;
    }
    .right {
        width: 200px;
        height: 100%;
        background: #ff0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .center-ct {
        height: 100%;
        background: #60f;
        position: absolute;
        top: 0;
        left:0;
        margin:0;
        width: 100%;
    }
    .center {
        margin: 0 200px;
    }