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