css for div與浮動的div重疊？

我幾乎是一個初學者，我試圖找出爲什麼我的CSS不正常工作。問題是，我設置背景顏色爲綠色的ID與ID＃zona6，但顏色適用於與ID＃zona2和＃zona3的div。css for div與浮動的div重疊？

但是，背景顏色與id＃zona6的div具有相同的比例，並且在chrome檢查元素中，div看起來就是該顏色的位置，但其中的文本位於＃zona4下方和＃zona5，它應該是......我重新檢查了所有div的顯示和位置，它們都被設置爲相對和塊。另外，當我在body元素中鍵入東西時，div＃zona6中的文本與它重疊（這很明顯，因爲div＃zona6實際上與＃zona2和＃zona3重疊）。

我也在Internet Explorer中測試過它，我仍然無法找到問題，它一定很簡單，但我不明白。

#zona1 { 
 
    height: 15%; 
 
} 
 
#zona2 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#zona3 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona4 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#zona5 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona6 { 
 
    height: 15%; 
 
    background-color: green; 
 
}

<div id="zona1"> 
 
    vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb 
 
    twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
</div> 
 
<div id="zona2"> 
 
    vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
</div> 
 
<div id="zona3"> 
 
    ntrbrt 
 
</div> 
 
<div id="zona4"> 
 
    htrrwt 
 
</div> 
 
<div id="zona5"> 
 
    hb5ynyre 
 
</div> 
 
<div id="zona6"> 
 
    hh3653gterbwtebt 
 
</div>

的index.css文件是空的。

來源

2017-02-14 Marc Spataru

這是因爲，你正在使用％沒有固定像素的高度。根據元素內的內容計算百分比。要麼放置相同的內容或PX的高度。 –

只需添加一個Clear:both;到#zona6這樣，它不會漂浮到最近的浮
這裏是一個jsfiddle

來源

2017-02-14 18:14:37

謝謝！有效。 –

由於您對某些div使用了浮點值，因此應該將float應用於其餘的div。由於您沒有給出任何浮動值#zona6，它會自動將自己置於#zona1這就是爲什麼你看到div #zone6與其他人重疊。提供float: left和width: 100%使用float屬性時使其下降

<html> 
 

 
<head> 
 
    <style> 
 
     #zona1 { 
 
      height: 15%; 
 
      float: left; 
 
     } 
 
     
 
     #zona2 { 
 
      height: 35%; 
 
      float: left; 
 
      width: 50%; 
 
      background-color: blue; 
 
     } 
 
     
 
     #zona3 { 
 
      height: 35%; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona4 { 
 
      height: 35%; 
 
      float: left; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona5 { 
 
      height: 35%; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona6 { 
 
      height: 15%; 
 
      background-color: green; 
 
      width: 100%; 
 
      float: left; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="zona1"> 
 
     vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
    </div> 
 
    <div id="zona2"> 
 
     vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
    </div> 
 
    <div id="zona3"> 
 
     ntrbrt 
 
    </div> 
 
    <div id="zona4"> 
 
     htrrwt 
 
    </div> 
 
    <div id="zona5"> 
 
     hb5ynyre 
 
    </div> 
 
    <div id="zona6"> 
 
     hh3653gterbwtebt 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-14 18:11:38 Nitheesh

你需要應用clearfix技術。應用後的那些部件誰是「浮動」

然後clearfix類，包括在你的CSS如下：

.clearfix:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

一些幫助，可以發現here（葡萄牙語）

來源

2017-02-14 18:12:14

您所看到的綠色背景因爲你在＃zona4和＃zona5上留下了浮動屬性。浮動將這些元素移動到典型文檔流之外，並且綠色背景填充在它們後面，所以它們本身並不具有綠色背景。一個clearfix應該給你你想要的效果。這只是一個例子，其中花車可以奇怪的方式行事。

有一件事可以幫助你很多，是能夠使用檢查元素單獨查看每個CSS屬性的效果。如果您使用的是Chrome，請右鍵單擊頁面並選擇檢查選項，然後單擊頁面上的html元素以查看右側的CSS屬性。您可以開啓和關閉每個CSS屬性來查看它的效果。 -Alyssa

來源

2017-02-14 18:15:27

解決起來很簡單。它的行爲如此，因爲未設置display。只需添加display: inline-block即可使其行爲如同...塊;）

#zona1 { 
 
    height: 15%; 
 
} 
 
#zona2 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#zona3 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona4 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#zona5 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona6 { 
 
    height: 15%; 
 
    background-color: green; 
 
    /* display: block; */ /* to make it appear on the next line. */ 
 
    display: inline-block; 
 
}

<div id="zona1"> 
 
    vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb 
 
    twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
</div> 
 
<div id="zona2"> 
 
    vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
</div> 
 
<div id="zona3"> 
 
    ntrbrt 
 
</div> 
 
<div id="zona4"> 
 
    htrrwt 
 
</div> 
 
<div id="zona5"> 
 
    hb5ynyre 
 
</div> 
 
<div id="zona6"> 
 
    hh3653gterbwtebt 
 
</div>

我希望它幫助:)

來源

2017-02-14 18:18:49 Evochrome

css for div與浮動的div重疊？

回答

相關問題