如何使用'calc”用 CSS 填充剩余容器宽度？

使用 CSS 填充剩余容器宽度

目标是最大化容器 div 中名为“middle”的元素的宽度，从而允许

解决方案：

利用CSS属性'calc'是实现这一点的关键。通过计算可用宽度并减去其他元素的固定宽度，我们可以动态确定剩余宽度。

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <fixed-element-width>);
}</fixed-element-width></code>

在提供的示例中：

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

以及 CSS：

<code class="css">.left {
  width: 100px;
}
.right {
  width: calc(100% - 100px);
}</code>

红色元素的固定宽度为 100px，而蓝色元素填充固定宽度后的剩余空间。

作为元素之间不留空间的替代方案，您可以可以在外部容器元素上设置 font-size: 0。

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