div元素不服從

我的頁面元素正在打破「包裝」div。下面是結構：div元素不服從

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link href="stilovi.css" rel="stylesheet" type="text/css"/> 
     <link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/> 
    </head> 
    <body> 
     <div id="wrapper" class="centrDiv"> 
      <div id="levo"> 
       <div id="logo" class="centrSlik"> 
        <img src="wheel.gif"/> 
       </div> 
       <div id="podmeni"> 
        <ul> 
         <li><a href="#">test</a></li> 
         <li><a href="#">test</a></li> 
         <li><a href="#">test</a></li> 

        </ul> 

       </div> 


      </div> 
      <div id="desno"> 
      <div id="meni"> 
       <ul> 
        <li></li> 
       </ul> 

      </div> 


      <div id="tekst"> 
       <p> 
        ttaatareatasfgfgfd 
       </p> 

      </div> 
      </div> 
     </div> 
    </body> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
</html>

和CSS樣式：

* { padding: 0; margin: 0; list-style: none; font-family: 'Philosopher', cursive; text-decoration: none; color: black;} 
#wrapper{width: 930px; height:100%; margin-top: 15px; background-color: #71637D;} 
#meni{background-image: -webkit-gradient(linear, left top, right bottom, from(#FF9999), color-stop(100%, #71637D)); padding: 8px 15px 10px; 
-webkit-border-bottom-left-radius: 10px 20px; -webkit-border-top-right-radius:10px 20px; border: 1px solid #FF9999; opacity:0.9; -webkit-box-shadow: 5px 5px 20px #4AC0F2;} 
#levo{width: 130px; min-height: 350px; background-image: -webkit-linear-gradient(top, #71637D 120px, #4AC0F2); 
     float: left;} 
#tekst{padding: 20px 15px;} 
#tekst p{margin-bottom: 10px;} 
#logo{background-color: white;} 
#desno{width: 800px; min-height: 350px; background-image: -webkit-linear-gradient(-75deg, #71637D 30%, #4AC0F2); float: right; 
-webkit-border-top-right-radius:10px 20px; } 

#podmeni ul{height: 220px; -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#FF9999), color-stop(100%, #4AC0F2)) 0 100% 0 0/0 5px 0 0 stretch;} 
#meni li{letter-spacing: 2px; font-size: 16px; font-weight: bold; display: inline; margin-right: 5px;} 
#meni li:hover{-webkit-border-image: -webkit-gradient(linear, right top, left top, from(#FF9999), color-stop(100%, transparent)) 0 0 100% 0/0 0 5px 0} 
#meni a{text-shadow: 0.1em 0.1em #333;} 

.centrDiv{margin: 0 auto;} 
.centrSlik{text-align: center;} 
.nevidljivo{display:none;}

在Firebug的所有元素都是出div#wrapper。爲什麼？？

來源

2011-08-24 daniel.tosaba

試着把它們放在超時。 –

這是你的問題，我沒有看到你在Firebug中描述的內容：http://jsfiddle.net/GR2fT/ –

使用W3C驗證你的代碼http://validator.w3.org/修復所有你遇到的錯誤，你會發現問題。 –

將「clearfix」或float:left添加到#wrapper似乎可以緩解該問題。

Clearfix：http://jsfiddle.net/GR2fT/1/

浮子：http://jsfiddle.net/GR2fT/2/

overflow:hidden：http://jsfiddle.net/GR2fT/3/

overflow:auto：http://jsfiddle.net/GR2fT/5/

/* one way to clearfix */ 
.clearfix:after, 
.clearfix:before { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
} 
.clearfix:after { 
    clear: both; 
}

的元素仍然「處於」 #wrapper，你都看不出來看背景。

當你不能使用float（未知寬度，但你想要100％寬度）時，Clearfix是很好的選擇。

溢出技巧也很好，但我認爲它在現代瀏覽器中效果最好，並不總是適用。

相關：Is clearfix deprecated?

來源

2011-08-24 23:32:55

'溢出：自動'在IE中不工作？ –

http://jsfiddle.net/GR2fT/4/ –

我不是100％確定，我總是隻使用clearfix。我在IETester的IE6-9中檢查了你的小提琴，他們都很好看。 –

div元素不服從

回答

相關問題