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>

原文地址：https://www.cnblogs.com/shun1015/p/12243601.html