如何使用 CSS `calc()` 使元素填滿其容器的剩餘寬度？

在CSS 中有效填充容器寬度

在我們的HTML 標記中，我們有一個包含三個元素的標題列：圖像、中間元素和右側元素。中間元素的目的是佔據容器的剩餘寬度。

為了實現這一點，CSS 提供了一個強大的工具：calc()。此函數允許根據可用空間動態計算長度。

神奇之處在於以下CSS 規則：

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

在此規則中，#middle 元素的寬度是透過減去來計算的固定寬度#left 元素的寬度(100px)與容器總寬度(100%) 的比值。這樣可以確保中間元素完美地填滿剩餘空間。

總而言之，透過使用 calc()，我們可以根據可用的容器空間動態調整 #middle 的寬度，從而獲得美觀且完美的效果對齊標題列。

以上是如何使用 CSS `calc()` 使元素填滿其容器的剩餘寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！