CSS实现三列布局

1. 使用float实现三列左右固定宽高，中间自适应宽度

<section class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

<style>
    .wrapper div {  height: 300px;  }
    .left {  float: left;   100px;  background: red;  }
    .center {  background: blue;  margin-left: 100px;  margin-right: 100px;  }
    .right {  float: right;   100px;  background: yellow;  }
</style>
注意： 这里的right元素右浮动，center没有浮动，应该把右浮动的元素写在center前面才能实现三列效果，否则右浮动的元素会被挤向下一行；

2. 使用opsition实现

<section class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</section>

<style>
    .wrapper { position: relative; }
    .wrapper div { height: 300px;  }
    .left { position: absolute;  top: 0;  left: 0;   100px;  background: red; }
    .center { position: absolute;  top: 0;  left: 100px;  right: 100px;  background: blue; }
    .right { position: absolute;  top: 0;  right:0;   100px;  background: yellow; }
</style>
注意： 这里的center一定要设置left和right，才能让中间内容区被撑开

3.flex布局实现

<style>
    .wrapper { display: flex }
    .wrapper div { height: 300px;  }
    .left {  100px;  background: red; }
    .center { background: blue; flex: 1;}
    .right {  100px;  background: yellow;}
</style>
注意： 这里的center要设置flex: 1;实现中间宽度自适应

4. table布局

<style>
    .wrapper { display: table;  100%;}
    .wrapper div { display: table-cell; height: 300px;  }
    .left {  100px;  background: red; }
    .center { background: blue;}
    .right {  100px;  background: yellow;}
</style>
注意：要给父元素设置宽度百分百

5.双飞翼，利用margin负值实现

<body>
    <section class="wrapper">
        <div class="center"></div>
    </section>
    <div class="left"></div>
    <div class="right"></div>
</body>

<style>
    .wrapper {  100%;  height: 100px;  background-color: #fff;  float: left;  }
    .wrapper .center { margin: 0 210px;  height: 100px;  background-color: #ffe6b8;  }
    .left { float: left;   200px;  height: 100px;  background-color: darkorange;  margin-left: -100%;  }
    .right { float: left;   200px;  height: 100px;  background-color: darkorange;  margin-left: -200px;  }
</style>
注意：要在center外层包一个父元素，并给这个父元素设置float开启BFC，并且center部分代码要放在最前面，左右的无所谓
参考链接： https://blog.csdn.net/cinderella_hou/article/details/52156333
　　　　　 https://blog.csdn.net/weixin_40485972/article/details/78161022?utm_source=blogxgwz0