布局-三列布局（定宽+自适应+定宽）

两侧定宽中间自适应

方案一：float+margin+(fix)

结构：

<div class="parent">
        <div class="left"><p>left</p></div>
        <div class="center-fix">
            <div class="center">
                <p>center</p>
                <p>center</p>
            </div>
        </div>
        <div class="right"><p>right</p></div>
    </div>

样式：

p {margin:0;}
    .parent {
        background-color: grey;
         600px;

        overflow: hidden;
    }
    .right,.left {
        position: relative;
        float: left;
         100px;
    }
    .center-fix {
        float: left;
         100%;
        margin: 0 -100px;
    }
    .center {
        margin: 0 110px;
         background-color: greenyellow;
     }
     .right {
         background-color: skyblue;
     }
     .left {
         background-color: indianred;
     }

方案二：inline-block + margin + (fix)

结构：

<div class="parent">
        <div class="left"><p>left</p></div>
        <div class="center-fix">
            <div class="center">
                <p>center</p>
                <p>center</p>
            </div>
        </div>
        <div class="right"><p>right</p></div>
    </div>

样式：

p {margin:0;}
    .parent {
        background-color: grey;
         600px;
        font-size: 0;/*去掉inline-block元素之间天然的空隙*/
    }
    .right,.left,.center-fix {
        display: inline-block;
        font-size: 16px;
        vertical-align: top;/*文本定位在顶部*/
    }
    .right,.left {
         100px;
        position: relative;
    }
    .center-fix {
         100%;
        margin: 0 -100px;
    }
    .center {
        margin: 0 110px;
         background-color: greenyellow;
     }
     .right {
         background-color: skyblue;
     }
     .left {
         background-color: indianred;
     }

方案三：table + table-cell

 

结构：

<div class="parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>center</p>
            <p>center</p>
        </div>
        <div class="right"><p>right</p></div>
    </div>

样式：

p {margin:0;}
    .parent {
        background-color: grey;
         600px;
        
        display: table;
        table-layout: fixed;
    }
    .right,.left {
         100px;
        display: table-cell;
    }
    .center {
        display: table-cell;/*没有margin属性*/
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        background-origin: padding-box;/*指定背景图片从哪个区域绘制*/
        background-clip: padding-box;/*背景图片显示的区域定位*/

         background-color: greenyellow;
     }
     .right {
         background-color: skyblue;
     }
     .left {
         background-color: indianred;
     }

方案四：absolute

结构：

<div class="parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>center</p>
            <p>center</p>
        </div>
        <div class="right"><p>right</p></div>
    </div>

样式：

p {margin:0;}
    .parent {
        background-color: grey;
         600px;
        height: 36px;/*position:absolute的元素是脱离文档流的*/
        
        position: relative;
    }
    .right,.left,.center {
        position: absolute;
    }
    .center {
        left: 110px;
        right: 110px;
         background-color: greenyellow;
     }
     .right {
         right: 0;
          100px;
         background-color: skyblue;
     }
     .left {
         left: 0;
          100px;
         background-color: indianred;
     }

解决方案五：flex

结构：

<div class="parent">
        <div class="left"><p>left</p></div>
        <div class="center">
            <p>center</p>
            <p>center</p>
        </div>
        <div class="right"><p>right</p></div>
    </div>

样式：

p {margin:0;}
    .parent {
        background-color: grey;
         600px;

        display: flex;
    }
    .right,.left {
         100px;
    }
    .center {
        flex: 1;/*center获得所有的剩余部分*/
        margin: 0 10px;
         background-color: greenyellow;
     }
     .right {
         background-color: skyblue;
     }
     .left {
         background-color: indianred;
     }