CSS 如何使元素填充剩余宽度，当兄弟元素宽度不定时

在本文中，我们将介绍如何使用CSS实现当兄弟元素的宽度不定时，使某个元素填充剩余宽度的效果。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用flexbox布局

flexbox布局是CSS中灵活且强大的布局模型，可以轻松实现元素的自适应和对齐。在解决兄弟元素宽度不定时，使某个元素填充剩余宽度的问题时，flexbox布局是最佳解决方案。

首先，我们需要在容器元素上应用display: flex属性，将其设置为flex容器。然后，我们可以使用flex-grow属性来指定元素的伸缩比例。伸缩比例决定了元素在容器中所占据的比例。例如，如果一个元素的flex-grow属性值为1，而另一个元素的flex-grow属性值为2，那么前者将占据容器宽度的1/3，而后者将占据容器宽度的2/3。

下面是一个示例，展示了如何使用flexbox布局来实现元素填充剩余宽度的效果：

<div class="container">
  <div class="fill"></div>
  <div class="variable-width"></div>
</div>

<style>
.container {
  display: flex;
  height: 100px;
}

.fill {
  flex-grow: 1;
  background-color: red;
}

.variable-width {
  width: 200px;
  background-color: blue;
}
</style>

在上面的示例中，.container元素是flex容器，其中包含了两个子元素.fill和.variable-width。.fill元素的flex-grow属性值为1，表示它将占据剩余的宽度。.variable-width元素的宽度被设置为200px，它的宽度是不固定的。

通过上述CSS样式，我们可以实现.fill元素自动填充了.container元素剩余的宽度，同时保持.variable-width元素的宽度为200px。

使用calc函数

除了使用flexbox布局外，还可以使用calc函数来实现元素的自适应宽度。calc函数允许我们在CSS属性中执行简单的数学计算。

假设我们有一个父元素和两个子元素，其中一个子元素的宽度是固定的，而另一个子元素的宽度需要根据剩余宽度来自适应调整。我们可以使用calc函数来实现这个效果。具体步骤如下：

首先，给父元素设置position: relative，以便子元素可以使用相对于父元素的坐标定位。
将固定宽度的子元素设置为float: left，使其在父元素的左侧浮动。
将需要根据剩余宽度自适应调整的子元素设置为float: right，并使用calc函数来计算其宽度。计算公式为父元素的宽度减去固定宽度子元素的宽度。

下面是一个示例代码，展示了如何使用calc函数来实现元素填充剩余宽度的效果：

<div class="container">
  <div class="fixed-width"></div>
  <div class="fill"></div>
</div>

<style>
.container {
  position: relative;
  height: 100px;
}

.fixed-width {
  width: 200px;
  background-color: blue;
  float: left;
}

.fill {
  width: calc(100% - 200px);
  background-color: red;
  float: right;
}
</style>

在上面的示例中，.container元素是父元素，其中包含了两个子元素.fixed-width和.fill。.fixed-width元素的宽度被设置为200px，它是固定宽度的。.fill元素的宽度通过计算父元素的宽度减去固定宽度子元素的宽度得到，并使用calc函数应用。

通过上述CSS样式，我们可以实现.fill元素自动填充了.container元素剩余的宽度，同时保持.fixed-width元素的宽度为200px。