CSS3实现了左右固定中间自适应的几种方法

1，弹性盒（flex）布局

    中间 .center 区域设置    flex-grow: 1 或者 width: 100%

.container {
                width: 100%;
                min-height: 200px;
                background-color: red;
                display: flex;
            }
            .container .left {
                width: 200px;
                height: 200px;
                background-color: purple;
            }
            .container .right {
                width: 150px;
                height: 200px;
                background-color: blue;
            }
            .container .center {
                /* flex-grow: 1; */
                width: 100%;
                height: 200px;
                background-color: orange;
            }

        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>

2, 利用浮动（注意div排版的结构）

.container{
            width: 100%;
           /* background-color: green;
            min-height: 500px; */
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 150px;
            height: 300px;
            background-color: purple;
            float: right;
        }
        .center{
            height: 300px;
            margin-left: 200px;
            margin-right: 150px;
            background-color: blue;
        }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

3，定位 （注意div排版的结构）

.container {
                width: 100%;
                position: relative;
            }

            .left {
                width: 200px;
                height: 300px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                position: absolute;
            }

            .right {
                width: 150px;
                height: 300px;
                background-color: purple;
                position: absolute;
                top: 0;
                right: 0;
            }

            .center {
                height: 300px;
                margin-left: 200px;
                margin-right: 150px;
                background-color: blue;
            }
<div class="container">			<div class="left"></div>			<div class="right"></div>			<div class="center"></div>		</div>

4, 双飞翼布局

left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度


body {
            min-width: 550px;
            font-weight: bold;
            font-size: 20px;
        }

        #container {
            overflow: hidden;
        }

        #left,
        #right,
        #center {
            float: left;
        }

        #center {
            width: 100%;
            background: rgb(206, 201, 201);
        }

        #left {
            width: 200px;
            margin-left: -100%;
            background: rgba(95, 179, 235, 0.972);
        }

        #right {
            width: 150px;
            margin-left: -150px;
            background: rgb(231, 105, 2);
        }

        .content {
            margin: 0 150px 0 200px;
        }
                
                <div id="container">
            <div id="center">
                <div class="content">#center</div>
            </div>
            <div id="left">#left</div>
            <div id="right">#right</div>
        </div>