1.利用浮动
将左右两栏分别设置为向左和向右浮动，然后中间栏通过设置overflow: hidden来清除浮动的影响，从而实现自适应宽度。
<body><div class="container"><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></div><style>.container {width: 100%;overflow: hidden;}.left {float: left;width: 200px;background-color: lightblue;}.right {float: right;width: 200px;background-color: lightgreen;}.middle {margin-left: 200px;/* 左侧栏的宽度 */margin-right: 200px;background-color: lightyellow;}</style>
</body>2.postion
用绝对定位将左右两栏固定在两侧，中间栏通过设置左右边距来让出左右两栏的空间，实现自适应
为什么不使用绝对定位：
在三栏布局中，如果使用固定定位，左右两栏会一直固定在视口的两侧，不会随着中间内容的滚动而调整位置，这可能会导致在页面较长时，左右栏与中间内容的关联性变得很弱，视觉上也可能会显得不协调。
通过将包含三栏的容器元素设置为相对定位（position: relative），然后将左右两栏设置为绝对定位，就可以使左右两栏相对于容器进行定位。这样，当中间内容滚动时，左右两栏会保持与中间内容的相对位置不变，视觉上更加协调
固定定位在布局上相对较为局限，因为它始终固定在视口的特定位置，不会随着页面内容的布局变化而调整。
在三栏布局中，中间自适应的部分可以根据内容的多少自动调整宽度，而左右两栏通过绝对定位可以固定在容器的两侧，不会受到中间内容宽度变化的影响
<body><div class="container"><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></div><style>.container {position: relative;width: 100%;}.left {position: absolute;left: 0;width: 200px;background-color: lightblue;}.right {position: absolute;right: 0;width: 200px;background-color: lightgreen;}.middle {margin: 0 200px 0 200px;background-color: lightyellow;}</style>
</body>3.display: flex;
将中间栏的flex属性设置为1，它会自动占据剩余的空间，实现自适应宽度。
<body><div class="container"><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></div><style>.container {display: flex;}.left {width: 200px;background-color: lightblue;}.right {width: 150px;background-color: lightgreen;}.middle {flex: 1;background-color: lightyellow;}</style>
</body>4.display: grid;
将中间栏的grid中间属性设置为1fr，它会自动占据剩余的空间，实现自适应宽度。
<body><div class="container"><div class="left">左侧栏</div><div class="center">中间栏</div><div class="right">右侧栏</div></div><style>.container {display: grid;grid-template-columns: 200px 1fr 200px;/* 左侧栏200px，中间栏自适应，右侧栏200px */height: 100px;/* 固定高度 */}.left,.right {background-color: #ebc4c4;/* 背景颜色 */}.center {background-color:#a5e1bf ;/* 背景颜色 */}</style>
</body>
