左边固定宽右边自适应的6种方法

针对“左边固定宽右边自适应的6种方法”，以下是详细的攻略：

针对“左边固定宽右边自适应的6种方法”，以下是详细的攻略：

一、使用float属性

通过给左边固定宽的元素设置浮动属性float: left，并给右边自适应的元素设置margin-left和overflow:hidden属性，就可以达到目的。

示例代码：

<div class="container">
  <div class="fixed">固定宽度</div>
  <div class="auto">自适应宽度</div>
</div>

.container {
  overflow: hidden;
}
.fixed {
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.auto {
  margin-left: 100px; /* 左边fixed的宽度 */
  background-color: cyan;
}

二、使用flex布局

通过将display: flex属性应用于父元素，并给左边固定宽度的元素设置flex-shrink: 0属性，右边自适应的元素将占据剩余空间。

示例代码：

<div class="container">
  <div class="fixed">固定宽度</div>
  <div class="auto">自适应宽度</div>
</div>

.container {
  display: flex;
}
.fixed {
  width: 100px;
  height: 100px;
  background-color: yellow;
  flex-shrink: 0; /* 禁止缩小 */
}
.auto {
  flex-grow: 1; /* 占据剩余空间 */
  background-color: cyan;
}

三、使用绝对定位

通过将左边固定宽度的元素position: absolute绝对定位，然后使用left属性指定距离左边的距离，再通过给右边自适应的元素设置margin-left属性占据剩余空间。

示例代码：

<div class="container">
  <div class="fixed">固定宽度</div>
  <div class="auto">自适应宽度</div>
</div>

.container {
  position: relative;
}
.fixed {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  top: 0;
  left: 0;
}
.auto {
  margin-left: 100px;
  background-color: cyan;
}

四、使用grid布局

通过将display: grid属性应用于父元素，并设置左边固定宽度的元素所在的列宽度为固定值，右边自适应的元素将占据自适应的空间。

示例代码：

<div class="container">
  <div class="fixed">固定宽度</div>
  <div class="auto">自适应宽度</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px auto; /* 左侧固定100px */
}
.fixed {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.auto {
  background-color: cyan;
}

五、使用表格布局

通过将display: table属性应用于父元素，并将左边固定宽度的元素包裹在一个td标签中，右边自适应的元素包裹在一个td标签中，右边的td设置width: 100%属性。

示例代码：

<div class="container">
  <table>
    <tr>
      <td class="fixed">固定宽度</td>
      <td class="auto">自适应宽度</td>
    </tr>
  </table>
</div>

.container {
  display: table;
}
.fixed {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.auto {
  width: 100%;
  background-color: cyan;
}

六、使用多列布局

通过使用多列布局（column-count属性）将左边的元素放在第一列，将右边的元素放在第二列，并设置第一列的宽度为固定值。

示例代码：

<div class="container">
  <div class="fixed">固定宽度</div>
  <div class="auto">自适应宽度</div>
</div>

.container {
  column-count: 2;
}
.fixed {
  width: 100px;
  height: 100px;
  background-color: yellow;
  break-inside: avoid; /* 避免跨页面 */
}
.auto {
  background-color: cyan;
}

以上六种方法均可以实现左边固定宽度，右边自适应宽度的效果，具体应使用那种方法根据不同的需求选择不同的方法。