css三栏布局--左右宽度固定，中间自适应

<!-- 三栏布局 -->
<!-- float布局 脱离文档流，兼容性好  position布局 脱离文档流，使用性差  flex布局 解决前两者缺点，移动使用居多 tabel布局 兼容性好，不存在脱离文档流（内容多时，两边会自动撑高） grid布局 代码简化 -->
<section class="layout float">
    <style type="text/css">
        .layout.float .left{
            width: 100px;
            float: left;
            background: #ccc;
        }
        .layout.float .right{
            width: 100px;
            float: right;
            background: #333;
        }
        .layout.float .center{
            background: red;
        }
    </style>
    <h1>三栏布局--左右宽度固定，中间自适应</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">这是float布局
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        </div>
    </article>
</section>

<section class="layout position">
    <style type="text/css">
        .layout.position .left-center-right{
            position: relative;
            margin-top: 10px;
        }
        .layout.position .left{
            width: 100px;
            position: absolute;
            top:0;
            left: 0;
            background: #ccc;
        }
        .layout.position .right{
            width: 100px;
            position: absolute;
            top:0;
            right: 0;
            background: #333;
        }
        .layout.position .center{
            background: red;
            position: absolute;
            left: 100px;
            right: 100px;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">这是absolute布局
       <!--  <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p> -->
        </div>
    </article>
</section>

<section class="layout tabel">
    <style type="text/css">
    
        .layout.tabel .left-center-right{
            display: table;
            width:100%;
            height: 100px;
            margin-top: 120px;
        }
        .layout.tabel .left-center-right div{
            display: table-cell;
        }
        .layout.tabel .left{
            width: 100px;
            
            background: #ccc;
        }
        .layout.tabel .right{
            width: 100px;
            background: #333;
        }
        .layout.tabel .center{
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">这是tabel布局
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        </div>
        <div class="right"></div>
    </article>
</section>

<section class="layout flex">
    <style type="text/css">
    
        .layout.flex .left-center-right{
            margin-top: 10px;
            display: flex;
        }
        .layout.flex .left{
            width: 100px;
            background: #ccc;
        }
        .layout.flex .right{
            width: 100px;
            background: #333;
        }
        .layout.flex .center{
            background: red;
            flex: 1;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">这是flex布局
         <p>这是三栏布局的浮动解决方案</p>
         <p>这是三栏布局的浮动解决方案</p>
         <p>这是三栏布局的浮动解决方案</p>
         <p>这是三栏布局的浮动解决方案</p>
         <p>这是三栏布局的浮动解决方案</p>
         <p>这是三栏布局的浮动解决方案</p>
        </div>
        <div class="right"></div>
    </article>
</section>

<section class="layout grid">
    <style type="text/css">
    
        .layout.grid .left-center-right{
            margin-top: 10px;
            display: grid;
            grid-template-rows:100px;
            grid-template-columns:100px auto 100px;
        }
        .layout.grid .left{
            background: #ccc;
        }
        .layout.grid .right{
            background: #333;
        }
        .layout.grid .center{
            background: red;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">这是grid布局
          <p>这是三栏布局的浮动解决方案</p>
          <p>这是三栏布局的浮动解决方案</p>
          <p>这是三栏布局的浮动解决方案</p>
          <p>这是三栏布局的浮动解决方案</p>
          <p>这是三栏布局的浮动解决方案</p>
          <p>这是三栏布局的浮动解决方案</p>
        </div>
        <div class="right"></div>
    </article>
</section>

<!-- 两栏布局 上下高度固定，中间自适应-->
<section class="layout vertical">
    <style type="text/css">
        .layout.vertical{
            margin-top: 70px;
        }
        .layout.vertical .left{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
        .layout.vertical .right{
            width: 100px;
            height: 100px;
            background: #333;
        }
        .layout.vertical .center{
            width: 100px;
            background: red;
        }
    </style>
    <h1>两栏布局--上下高度固定，中间自适应</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        <p>这是三栏布局的浮动解决方案</p>
        </div>
        <div class="right"></div>
        
    </article>
</section>
<section class="layout absolute">
    <style>
        .layout.absolute .con>div{position: absolute;}
        .layout.absolute .top{background: red;top: 0;height:100px;}
        .layout.absolute .center{background: yellow;top:100px;bottom:100px;overflow:auto;}
        .layout.absolute .bottom{background: blue;bottom:0;height:100px;}
    </style>
    <article class="con">
        <div class="top"></div>
        <div class="center">
            <h1>absolute定位</h1>
        </div>
        <div class="bottom"></div>
    </article>
</section>