前端实现两边固定中间自适应布局

实现两边固定中间自适应的布局，可以通过多种方式来完成，这里提供几种常见的方法：

方法一：Flexbox布局

使用CSS的Flexbox布局可以很容易地实现这种布局。将父容器设置为display: flex;，然后设置两边的元素宽度固定，中间元素的flex属性设置为1，这样它会自动填充剩余空间。

.container {
  display: flex;
}

.left,
.right {
  width: 150px; /* 两边固定宽度 */
}

.center {
  flex: 1; /* 中间自适应 */
}

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容</div>
  <div class="right">右侧内容</div>
</div>

方法二：Grid布局

CSS Grid布局也是一个很好的选择。可以为两边的元素设置固定的grid-column宽度，而中间的元素设置为1fr，这样它会占据剩余的空间。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 150px; /* 两边固定宽度，中间自适应 */
}

/* .left, .center, .right 不需要额外的样式 */

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容</div>
  <div class="right">右侧内容</div>
</div>

方法三：传统的float布局

对于不支持Flexbox或Grid的旧浏览器，可以使用传统的float布局来实现。

.left {
  float: left;
  width: 150px;
}

.right{
  float: right;
  width: 150px;
}
.center {
  margin: 0 150px; /* 中间自适应，两边留出固定宽度的空间 */
}

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容</div>
  <div class="right">右侧内容</div>
</div>

方法四：绝对定位

使用绝对定位也可以实现，但这种方法需要注意的是，中间内容的padding要设置得足够大，以避免内容被两边的固定宽度元素覆盖。

.container {
  position: relative;
}

.left,
.right {
  position: absolute;
  width: 150px; /* 固定宽度 */
  top: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.center {
  padding: 0 150px; /* 中间内容的padding等于两边固定宽度 */
}

<div class="container">
  <div class="left">左侧内容</div>
  <div class="center">中间内容</div>
  <div class="right">右侧内容</div>
</div>

这些方法中，Flexbox和Grid布局是现代前端开发中推荐的方式，因为它们更加灵活和强大。传统的float布局和绝对定位方法可以作为兼容旧浏览器的备选方案。