如何使用 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中文網其他相關文章！