写一个中间固定，两边自适应的布局（使用多种方法）

在前端开发中，实现一个中间固定宽度，两边自适应的布局是常见的需求。以下提供几种不同的方法来实现这种布局：

方法一：Flexbox 布局

Flexbox 提供了灵活的布局方式，可以轻松实现中间固定两边自适应的布局。

HTML:

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

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.sidebar-left, .sidebar-right {
  flex: 1; /* 两侧自适应 */
  background-color: #f0f0f0;
}

.content {
  width: 600px; /* 中间固定宽度 */
  background-color: #e0e0e0;
}

方法二：Grid 布局

CSS Grid 也是一个强大的布局系统，能够处理复杂的二维布局。

HTML 保持不变，CSS 如下：

.container {
  display: grid;
  grid-template-columns: 1fr 600px 1fr; /* 两侧自适应，中间600px */
  grid-template-rows: 100px; /* 示例高度 */
}

.sidebar-left {
  background-color: #f0f0f0;
  grid-column: 1;
}

.content {
  background-color: #e0e0e0;
  grid-column: 2;
}

.sidebar-right {
  background-color: #f0f0f0;
  grid-column: 3;
}

方法三：定位与边距

使用绝对定位与边距也可以实现这种布局，但这种方法相对不那么灵活。

HTML 保持不变，CSS 如下：

.container {
  position: relative; /* 作为定位的参考 */
}

.sidebar-left, .sidebar-right {
  position: absolute;
  top: 0;
  width: 50%; /* 初始宽度50% */
  background-color: #f0f0f0;
}

.sidebar-left {
  left: 0;
  right: calc(50% + 300px); /* 留出中间内容的空间 */
}

.sidebar-right {
  right: 0;
  left: calc(50% + 300px); /* 留出中间内容的空间 */
}

.content {
  position: relative; /* 相对于.container定位 */
  width: 600px; /* 固定宽度 */
  left: 50%; /* 居中 */
  transform: translateX(-50%); /* 偏移自身宽度的一半以实现居中 */
  background-color: #e0e0e0;
  z-index: 1; /* 确保在中间层显示 */
}

注意：在使用定位与边距的方法时，需要确保中间内容的 z-index 高于两侧内容，以避免被遮挡。同时，这种方法可能在响应式布局中需要额外的调整。

方法四：浮动与边距

通过给两侧内容设置浮动，并给中间内容设置左右边距，也可以实现这种布局。但浮动可能会影响其他元素的布局，使用时需谨慎。

HTML 保持不变，CSS 如下：

.sidebar-left, .sidebar-right {
  width: calc(50% - 300px); /* 两侧宽度自适应 */
  background-color: #f0f0f0;
}

.sidebar-left {
  float: left; /* 左浮动 */
}

.sidebar-right {
  float: right; /* 右浮动 */
}

.content {
  margin-left: calc(50% - 300px); /* 设置左边距 */
  margin-right: calc(50% - 300px); /* 设置右边距 */
  background-color: #e0e0e0;
}

在使用浮动与边距的方法时，需要注意清除浮动以避免对后续元素造成影响。通常可以通过给容器添加伪元素来清除浮动：

.container::after {
  content: "";
  display: table;
  clear: both;
}

每种方法都有其适用的场景和优缺点，在实际开发中可以根据需求选择最适合的方法。