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

使用 CSS 填充剩餘容器寬度

在網頁設計領域，填充容器元素內的剩餘空間通常是至關重要的。這對於建立佔據螢幕一部分的標題或導覽列特別有用。讓我們探索如何使用 CSS 來實現這一點。

考慮以下程式碼片段：

<code class="html"><header>
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="如何在 CSS 中填滿容器元素的剩餘寬度？" >
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>

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

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

#right {
  background: green;
  display: inline-block;
}</code>

如您所見，id 為「middle」的 div 預計會被填滿標題列中的剩餘空間。讓我們使用CSS 來實現這一點：

<code class="css">#middle {
  flex: 1; /* New code */
}</code>

透過添加flex: 1，您可以告訴瀏覽器為此元素使用靈活的大小調整方案，在尊重約束的同時佔用盡可能多的空間

附加說明：

• calc() 函數可用來對CSS 值執行數學運算。在這種情況下， calc(100% - 100px) 將計算左側 div 佔用 100px 後容器的剩餘寬度。
• 或者，您可以在外部元素上設定 font-size: 0 以刪除任何內容內聯元素之間的空格。

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