標題/標題div的CSS背景顏色拼圖

我有以下標題div設置，但只有最左邊的div有內容時，標題的紅色背景不適用。這是爲什麼，因爲'標題'div有內容，其背景應該是紅色。標題/標題div的CSS背景顏色拼圖

頭的東西：

<title>Into the Breech</title> 
<link href="Styles/Reset.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
    body { font-family: Arial, Sans-Serif, System; }   
    #title { background-color: #F71831; font-weight: bold; }      
    .title-segment-left { float: left; } 
</style>

身體的東西：

<div id="title"> 
    <div id="menu-title" class="title-segment-left" style="width: 200px;"> 
     Menu 
    </div> 
    <div id="main-title" class="title-segment-left" style="width: auto;"> 
     Home Page 
    </div> 
    <div id="right-title" style="float: right;"> 
     Provantage Media Management System 
    </div> 
</div>

來源

2010-05-07 ProfK

當一個元素浮動時（比如你的.title-segment-left），它的父元素的佈局不會考慮浮動元素。這導致你的#title在沒有其他內容而不是浮動元素時摺疊爲0x0。由於它是0x0，所以不顯示背景。

這裏是tutorial on floats，這可能會有所幫助。

來源

2010-05-07 17:58:52 kevingessner

0x100％，但是：+1。 – ANeves 2010-05-07 18:01:06

有了那簡單，深刻，迄今未解讀的解釋，我懷疑我會再次提出這個問題。 – ProfK 2010-05-07 18:16:48

很高興我能幫到你。快樂的編碼。 – kevingessner 2010-05-07 20:16:19

您可能希望在最後一個div後清除浮動。

來源

2010-05-07 17:58:29 NotMe

謝謝。有趣的是，當我這樣做的時候，我想知道，「哪裏會出現浮動問題？」，並且很快就忘了它。 – ProfK 2010-05-07 18:04:07

使用螢火蟲並確認當您只有浮動的子元素時，父母的高度會坍塌爲「無」，並且您會理解您的問題。

你可以通過添加最後一個沒有內容的空div來破解左邊的內容。所以，它落後於左浮動的div，並迫使父div伸展。像這樣：

<div id="title"> 
    <div id="menu-title" class="title-segment-left" style="width: 200px;"> 
     Menu 
    </div> 
    <div id="main-title" class="title-segment-left" style="width: auto;"> 
     Home Page 
    </div> 
    <div id="right-title" style="float: right;"> 
     Provantage Media Management System 
    </div> 
    <div style="clear: left;"></div> 
</div>

來源

2010-05-07 18:00:24 ANeves

標題/標題div的CSS背景顏色拼圖

回答

相關問題