三栏自适应布局

实现左中右三栏布局，左右为固定宽度，中间宽度随父元素宽度变化

1.flex布局

父元素设置display：flex; 左右盒子宽度固定，中间盒子设置flex：1;

<style>
        .container {
            width: 100%;
            height: 100px;
            display: flex;
        }
        .left {
            width: 200px;
            background-color: pink;
        }
        .center {
            flex: 1;
            background-color: red;
        }
        .right {
            width: 200px;
            background-color: plum;
        }
  </style>
    
    <div class="container">       
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

2.使用浮动float

为了使主要模块优先加载，把中间模块写在最前面；三栏设置宽度,左右固定宽度，中间100%,并且三栏都浮动；通过margin-left负值，把左边栏移到最左边，右边栏移到最右边

<style>
        .container{
            height: 100%;
        }
        .center{
            float: left;*
            height: 100%;
            width: 100%;*
            background-color: yellow;
        }
        .left{
            float: left;*
            width: 200px;*
            height:100%;
            background-color: blue;
            margin-left: -100%;*

        }
        .right{
            float: left;
            width: 150px;*
            height: 100%;
            background-color: green;
            margin-left: -150px;*
        }

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

产生的问题： 左右两栏会把中间栏覆盖掉一部分

• 解决方法：

• 1.圣杯布局

给父元素设置左右padding，分别给左右两栏设置position: relative;移到左右两边

<style>
       .container{
            height: 100%;
            padding-left:200px;*
            padding-right: 150px;*
        }
        .center{
            float: left;
            height: 100%;
            width: 100%;
            background-color: yellow;
        }
        .left{
            position: relative;*
            left: -200px;*
            float: left;
            width: 200px;
            height:100%;
            background-color: blue;
            margin-left: -100%;

        }
        .right{
            position: relative;*
            right: -150px;*
            float: left;
            width: 150px;
            height: 100%;
            background-color:green;
            margin-left: -150px;
        }
</style>
     <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

• 2 双飞翼布局：

给中间栏添加一层子元素，给添加的这一层子元素添加左右margin

<style>
       .container{
            height: 100%;
        }
        .center{
            float: left;
            height: 100%;
            width: 100%;
            background-color: yellow;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background-color: blue;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 150px;
            height: 100%;
            background-color: green;
            margin-left: -150px;
        }
        .inner{
            margin-left: 200px;*
            margin-right:150px;*
            height:100%;
            background-color: pink;
        }
 </style>
    
    <div class="container">
        <div class="center">
            <div class="inner"></div>*
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

注意：圣杯和双飞翼布局都是基于float浮动布局改动

3.使用定位position

父盒子设置相对定位position:relative; 左右盒子设置固定宽度,设置绝对定位position:absolution，分别设置left:0;top:0，right:0;top:0，中间盒子设置100%宽度

<style>
       .container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 100%;
            background-color: red;
        }

        .center {
            width: 100%;
            height: 100%;
            background-color: green;
        }

        .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            height: 100%;
            background-color: blue;
        }
  </style>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>    

4.grid网格布局

父盒子设置display:grid;并设置grid-template-columns: 200px auto 200px;

<style>    
        .container {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 200px auto 200px;
        }
        .left {
            background-color: red;
        }
        .center {
            background-color: green;
        }
        .right {
            background-color: blue;
        }
  </style>
  <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
  </div>