背景顏色被「浮動」取消

代碼說明：背景顏色被「浮動」取消

我正在創建一個帶有三個鏈接的欄。我製作了該欄，並嘗試使用float,text-align和width來分隔鏈接。（我試圖讓中心鏈接居中，另外兩個距離等距離，並且距離邊等距）。但是，當我最初使用3 divs（divs而不是「I」divs）時，背景顏色消失。所以我搞砸了，並意識到第三個鏈接的浮動導致了這個問題div。所以我又增加了一個div（最後的div），並且使用了一些小文本。但是，由於我不得不在文本中放入文本，所以它會拋棄我的空格。所以我在另一邊（第一個）做了div來平衡它。但它仍然拋出我的間距沒有浮動然而！

問題（S）：

爲什麼有一條線在最後div的float財產造成的背景顏色消失？

<div style="padding:0px;margin:0px;background-color:#3C3C3C;"> 
    <div style="color:#3C3C3C;float:left;"> 
     I 
    </div> 
    <div style="margin-left:50px;width:20%;float:left;text-align:center;"> 
     <a style="color:#3690B7;" href=""> 
      Hello 
     </a> 
    </div> 
    <div style="width:50%;float:left;text-align:center;"> 
     <a style="color:#3690B7;" href=""> 
      Hello 
     </a> 
    </div> 
    <div style="margin-right:50px;width:20%;float:left;text-align:center;"> 
     <a style="color:#3690B7;" href=""> 
      Hello 
     </a> 
    </div> 
    <div style="color:#3C3C3C;float:right;"> 
     I 
    </div> 
</div>

來源

2013-08-21 James G.

介意創造一個小提琴？ –

哎呀，忘了我不能刪除我自己的問題... derp。標記。 –

當然。繼續前進.. –

您通過添加例如下面你最後的div另一個div來清除浮動：

<div style="clear:both;"></div>

來源

2013-08-21 09:40:15 Marcin

我發現這比清除溢出：自動，因爲它鼓勵清理浮游物的做法爲一個應該是。順便說一句，他意味着你最後的「內部」div – Robert

是的，在最終的INNER div之後;） – Marcin

添加overflow: auto到您的外<div>：

<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">

來源

2013-08-21 09:40:22 MarcinJuraszek

的問題是，因爲你浮動元素是不浮動的另一個元素導致包裝元素被渲染，如果它是空的。

爲了解決這個問題，你可以添加一些寬度與包裝div

看看這個jsbin例子似乎是你正在尋找一個float:left;。

基本上你的第一個div應該是這樣的;

<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">

然後你只需要改變寬度，並刪除任何邊距或填充。

p.s.你真的應該考慮放棄內聯樣式，並使用外部樣式表和Id和類名稱。

來源

2013-08-21 09:44:01

是的，我只使用內聯樣式來測試和構建它，然後移動到外部樣式表。 –

背景顏色被「浮動」取消

回答

相關問題