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; width: 100px; background: red; }
.center { background: blue; margin-left: 100px; margin-right: 100px; }
.right { float: right; width: 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; width: 100px; background: red; }
.center { position: absolute; top: 0; left: 100px; right: 100px; background: blue; }
.right { position: absolute; top: 0; right:0; width: 100px; background: yellow; }
</style>
注意: 这里的center一定要设置left和right,才能让中间内容区被撑开

3.flex布局实现

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

4. table布局

<style>
.wrapper { display: table; width: 100%;}
.wrapper div { display: table-cell; height: 300px; }
.left { width: 100px; background: red; }
.center { background: blue;}
.right { width: 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 { width: 100%; height: 100px; background-color: #fff; float: left; }
.wrapper .center { margin: 0 210px; height: 100px; background-color: #ffe6b8; }
.left { float: left; width: 200px; height: 100px; background-color: darkorange; margin-left: -100%; }
.right { float: left; width: 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