如何使用 CSS 使元素填充容器的剩余宽度？

用 CSS 填充剩余容器宽度

在某些场景下，需要将容器内的剩余宽度分配给特定元素。例如，考虑一个包含三个元素的标题栏：左侧的图像、中间的元素和右侧的元素。目标是确保“中间”元素填充图像和右侧元素之间的剩余空间。

实现所需的布局

实现此所需的布局，在 CSS 中使用 calc() 的多功能性。实现以下代码举例说明了这种方法：

HTML:

<code class="html"><div class="left">
  100 px wide!
</div>
<div class="right">
  Fills width!
</div></code>

CSS:

<code class="css">.left {
  display: inline-block;
  width: 100px;
  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);
  background: blue;
  color: white;
}</code>

在此代码中：

• .left 和 .right 类被分配给各自的元素。
• display: inline-block;使元素能够在围绕其他内容流动时水平对齐。
• 宽度：将 .left 元素的显式宽度设置为 100 像素，为 .right 元素留下剩余空间。
• calc （100% - 100 像素）；通过从 100%（容器的整个宽度）减去 100px（.left 的宽度）来动态计算 .right 元素的宽度。该值确保 .right 元素填充剩余空间。

利用此技术，.right 元素将自动调整其宽度以填充可用空间，有效实现所需的布局。

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