使用 CSS 填充剩餘容器寬度
在網頁設計領域，填充容器元素內的剩餘空間通常是至關重要的。這對於建立佔據螢幕一部分的標題或導覽列特別有用。讓我們探索如何使用 CSS 來實現這一點。
考慮以下程式碼片段：
<code class="html"><header> <img src="image.jpg" /> <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，您可以告訴瀏覽器為此元素使用靈活的大小調整方案，在尊重約束的同時佔用盡可能多的空間
附加說明：
以上是如何在 CSS 中填滿容器元素的剩餘寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
