css中间自适应布局的5种解法详解

在CSS中，实现中间自适应布局是一种常见的需求。以下是五种实现中间自适应布局的方法，包括两个示例说明：

1. 使用flexbox布局

使用flexbox布局是一种简单的方法，可以实现中间自适应布局。可以将左侧和右侧的元素设置为固定宽度，将中间的元素设置为flex-grow属性，以填充剩余的空间。例如：

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

.container {
  display: flex;
}

.left {
  width: 100px;
}

.middle {
  flex-grow: 1;
}

.right {
  width: 100px;
}

上述代码将创建一个包含三个元素的flexbox布局，左侧和右侧的元素具有固定宽度，中间的元素将填充剩余的空间。

2. 使用grid布局

使用grid布局也是一种简单的方法，可以实现中间自适应布局。可以将左侧和右侧的元素设置为固定宽度，将中间的元素设置为grid-column属性，以填充剩余的空间。例如：

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
}

.middle {
  grid-column: 2;
}

上述代码将创建一个包含三个元素的grid布局，左侧和右侧的元素具有固定宽度，中间的元素将填充剩余的空间。

3. 使用绝对定位

使用绝对定位也可以实现中间自适应布局。可以将左侧和右侧的元素设置为绝对定位，将中间的元素设置为左侧和右侧元素之间的间距。例如：

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

.container {
  position: relative;
}

.left {
  position: absolute;
  left: 0;
  width: 100px;
}

.middle {
  margin: 0 100px;
}

.right {
  position: absolute;
  right: 0;
  width: 100px;
}

上述代码将创建一个包含三个元素的绝对定位布局，左侧和右侧的元素具有固定宽度，中间的元素将填充剩余的空间。

4. 使用table布局

使用table布局也可以实现中间自适应布局。可以将左侧和右侧的元素设置为table-cell，将中间的元素设置为table-cell，并将其宽度设置为100%。例如：

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

.container {
  display: table;
  width: 100%;
}

.left, .right {
  display: table-cell;
  width: 100px;
}

.middle {
  display: table-cell;
  width: 100%;
}

上述代码将创建一个包含三个元素的table布局，左侧和右侧的元素具有固定宽度，中间的元素将填充剩余的空间。

5. 使用calc()函数

使用calc()函数也可以实现中间自适应布局。可以将左侧和右侧的元素设置为固定宽度，将中间的元素设置为calc(100% - 200px)。例如：

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

.container {
  width: 100%;
}

.left {
  width: 100px;
}

.middle {
  width: calc(100% - 200px);
}

.right {
  width: 100px;
}

上述代码将创建一个包含三个元素的calc()函数布局，左侧和右侧的元素具有固定宽度，中间的元素将填充剩余的空间。

示例说明

以下是两个示例，说明中间自适应布局的实现方法：

示例1：使用flexbox布局

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

.container {
  display: flex;
}

.left {
  width: 100px;
}

.middle {
  flex-grow: 1;
}

.right {
  width: 100px;
}