CSS - 浮動和背景大小關係

目前，我正在處理導航並遇到此問題：CSS - 浮動和背景大小關係

導航的內容浮動到左側。當我嘗試爲導航本身設置背景顏色時，它不起作用。請看下面的例子：

http://cssdeck.com/labs/qknohqxe

當浮子：左側被去除，則背景顏色變得可見，然而，「形式」的導航被破壞。

我很確定我錯過了一個重要的一點，因爲我試圖達到這個簡單的點，其中窗體和背景顏色都保存爲我想要的。

我的猜測是，浮動內容和載體大小（在我的情況下是#nav）之間有關係。

需要針對此問題的建議/解決方法。

來源

2013-02-08 Mia

將高度加到您的.group。

.group{ 
    height: 300px; 
    background-color: blue; 
}

浮動對象時，它將其從文檔流中取出。意思是父對象與子元素的高度無關。

通過設置一個高度，你迫使容器下降。

或者，您可以向容器.group添加溢出來強制查找高度。

.group{ 
    overflow: hidden; 
    background-color: blue; 
}

來源

2013-02-08 12:39:14 Kolby

我不能..它需要動態，因爲內容將是動態的 – Mia 2013-02-08 12:41:13

執行此操作，請添加\t overflow：hidden; 給組。 – Kolby 2013-02-08 12:43:25

我無法將「嚴格」定義設置爲內容的大小，因爲某些組的按鈕數量會更多，並且背景高度也會發生變化。我試過讓它100％的高度（導航和組），但它沒有按我的預期工作。有沒有什麼辦法根據它的內容設置包裝div的高度？ – Mia 2013-02-08 12:43:31

一下添加到.group：

overflow:auto;

就是這樣。

還有另一種解決方案：在所有浮動div之後添加clear:both;元素。但它有點髒：

<div class="container"> 
    <div class="floating div"></div> 
    <div class="floating div"></div> 
    <div class="floating div"></div> 
    <div style="clear:both;"></div> 
</div>

它總是發生在你使用浮動div時。容器不關心浮動元素，所以它就像一個空容器，除非使用上述解決方案之一。

來源

2013-02-08 12:42:24 TheBronx

在父容器上（您的情況爲.group），添加overflow: auto或設置固定高度。

發生這種情況是因爲浮動以及絕對定位的元素在默認情況下會從文檔流中排除，因此在定位以下元素時會被忽略。

來源

2013-02-08 12:43:18 MildlySerious

謝謝！這就像魅力，也感謝你解釋爲什麼會發生這種情況！ – Mia 2013-02-08 12:45:54

這裏有工作的CSS聲明。

.group{ 
    background-color: blue; 
    float: left; 
    width: 200px; 
}

您需要了解嵌套元素的浮動和定位。

來源

2013-02-08 12:47:02 Mike

只需添加一個清除;到一個額外的元素：

<div id="nav"> 
    <div class="group"> 
     <div class="button">Button1</div> 
     <div class="button">Button2</div> 
     <div class="button small">Button3</div> 
     <div class="button small">Button4</div> 
     <div class="button">Button5</div> 
     <br class="clear" /> 
    </div> 
</div> 


#nav{ 
    width: 240px; 
} 

.button{ 
    float:left; 
    border-radius: 20px; 
    width: 200px; 
    height: 50px; 
    margin-top: 10px; 
    background-color: red; 
    text-align: center; 
    line-height: 50px; 
} 

.group{ 
    background-color: blue; 
} 

.small{ 
    width: 100px; 
} 
.clear 
{ 
    clear: both; 
}

來源

2013-02-08 12:47:24

CSS - 浮動和背景大小關係

回答

相關問題