CSS中如何讓中間元素填滿容器的剩餘寬度？

使用CSS 填充容器的剩餘寬度

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

程式碼解決方案

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

<code class="css">header {
  background: red;
}

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

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

解釋

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

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

替代解決方案

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

<code class="css">header {
  font-size: 0;
  ...
}</code>

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