第二個div裏面有沒有出現？

Question

我有一個頁面設置是這樣的：

HTML：

<div id="wrapper"> 
    <div id="right"> 
    ... 
    </div> 

    <div id="left"> 
    <div id="top">...</div> 
    <div id="bottom">...</div> 
    </div> 
</div> 

CSS：

#wrapper { 
    margin: 0 auto; 
    width: 400px; 
} 

#wrapper #right { 
    position: relative; 
    float: left; 
    width: 400px; 
    border: 1px solid black; 
} 

#wrapper #left { 
    position: fixed; 
    float: left; 
    width: 200px 
    top: 150px; 
    margin-left: -230px; 
    border: 1px solid black; 
} 

#wrapper #left #top { 
    float: left; 
    border: 1px solid black; 
    margin-bottom: 20px; 
} 

#wrapper #left #bottom { 
    float: left; 
    border: 1px solid black; 
} 

出於某種原因，左格內的底DIV沒有顯示出來。任何解釋爲什麼它不顯示？有沒有解決方案？提前致謝！

Answer 1

當您使用float:left;，該<div>不會佔用空間，所以底部<div>是頂格後面。要解決此問題，請從頂部<div>中取出float:left;。

Answer 2

這是顯示。檢查http://codepen.io/anon/pen/pzqoi

#wrapper {background:#f4f4f4; height:960px;} 
#right{background:#f4f4f4; border:1px solid #ccc; float:right;} 

#left {background:#f4f4f4; border:1px solid #ccc; float:left; padding:10px;} 
#top {background:#f4f4f4; border:1px solid #ccc;margin-bottom:5px;} 
#bottom {background:#f4f4f4; border:1px solid #ccc; clear:both;}