用 CSS 填充容器的剩余宽度

在标题中包含三个连续排列的元素的情况下，目标是让中间元素占据标题内的剩余空间。为了实现这一点，内联块显示和 CSS 中的 calc() 函数的组合被证明是有效的。

代码解决方案

提供的 HTML 结构由包含图像的标头、带有文本的中间元素和右侧元素。为了操纵它们的布局，我们应用 CSS，如下所示：

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

解释

• 内联块： 将元素显示为内联块可确保它们保持在同一行并表现得像块元素，允许宽度和高度调整。
• calc() 功能： 此函数对 CSS 执行数学运算价值观。本例中，我们通过100%减去左侧元素的固定宽度（100px）来计算剩余宽度。

这段代码的结果是中间元素拉伸填满剩余空间在标题中，容纳其内容，同时右侧元素保持 100 像素的宽度。

替代解决方案

如果您希望div之间有空格，可以通过将外部元素（标题）的字体大小设置为0来修改CSS：

header {
  font-size: 0;
  ...
}