CSS中如何让中间元素填满容器的剩余宽度？

使用 CSS 填充容器的剩余宽度

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

代码解决方案

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

<code class="css">header {
  background: red;
}

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

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

解释

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

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

替代解决方案

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

<code class="css">header {
  font-size: 0;
  ...
}</code>

以上是CSS中如何让中间元素填满容器的剩余宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！