用CSS 填充容器的剩餘寬度

在標題中包含三個連續排列的元素的情況下，目標是讓中間元素佔據標題內的剩餘空間。為了實現這一點，內聯塊顯示和 CSS 中的 calc() 函數的組合被證明是有效的。

程式碼解決方案

提供的 HTML 結構由包含圖像的標頭、帶有文字的中間元素和右側元素。為了操縱它們的佈局，我們應用 CSS，如下所示：

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

解釋

• 內嵌區塊： 將元素顯示為內聯區塊可確保它們保持在同一行並表現得像塊元素，允許寬度和高度調整。
• calc() 功能： 此函數對 CSS 執行數學運算價值。本例中，我們透過100%減去左側元素的固定寬度（100px）來計算剩餘寬度。

這段程式碼的結果是中間元素拉伸填滿剩餘空間在標題中，容納其內容，同時右側元素保持 100 像素的寬度。

替代解決方案

如果您希望div之間有空格，可以透過將外部元素（標題）的字體大小設為0來修改CSS：

header {
  font-size: 0;
  ...
}