
使用 CSS 填充剩餘容器寬度
在網頁設計領域,填充容器元素內的剩餘空間通常是至關重要的。這對於建立佔據螢幕一部分的標題或導覽列特別有用。讓我們探索如何使用 CSS 來實現這一點。
考慮以下程式碼片段:
1 2 3 4 5 | <code class = "html" ><header>
<img src= "image.jpg" />
<div id= "middle" >Middle Element</div>
<div id= "right" >Right Element</div>
</header></code>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 | <code class = "css" >header {
background: red;
}
#middle {
background: orange;
display: inline-block;
}
#right {
background: green;
display: inline-block;
}</code>
|
登入後複製
如您所見,id 為「middle」的 div 預計會被填滿標題列中的剩餘空間。讓我們使用CSS 來實現這一點:
1 2 3 | <code class = "css" >#middle {
flex: 1;
}</code>
|
登入後複製
透過添加flex: 1,您可以告訴瀏覽器為此元素使用靈活的大小調整方案,在尊重約束的同時佔用盡可能多的空間
附加說明:
- calc() 函數可用來對CSS 值執行數學運算。在這種情況下, calc(100% - 100px) 將計算左側 div 佔用 100px 後容器的剩餘寬度。
- 或者,您可以在外部元素上設定 font-size: 0 以刪除任何內容內聯元素之間的空格。
以上是如何在 CSS 中填滿容器元素的剩餘寬度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!