如何使用'calc”用 CSS 填滿剩餘容器寬度？

使用CSS 填充剩餘容器寬度

目標是最大化容器div 中名為「middle」的元素的寬度，從而允許

解決方案：

利用CSS屬性'calc'是實現這一點的關鍵。透過計算可用寬度並減去其他元素的固定寬度，我們可以動態地確定剩餘寬度。

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <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中文網其他相關文章！