包裝內的浮動浮動不顯示

Question

我正在使用Bootstrap框架，但喜歡做我自己的導航。我發現我在一個帶有浮動包裝的2個div裏沒有顯示出來，不知道爲什麼。 http://heidixu.com/misc/nav_div/

的結構是這樣的：

<div class="navBar-wrapper"> 
    <div class="logo"></div> 
    <div class="navItems"></div> 
</div> 

.navBar-wrapper { 
    max-width:1170px; 
    background-color:black; 
    height:45px; 
    padding-left:15px; 
    padding-right:15px; 
    z-index:99999; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 

.logo { 
    width:100px; 
    background-color:green; 
    float:left; 
} 

.navItems { 
    float:right; 
    background-color:red; 
    width:100px; 
} 

Answer 1

它們是空的，因此高度爲零。使用像螢火蟲或Chrome開發工具這樣的工具來檢查您的頁面，以發現它。

爲了解決這個問題，你可以做任何以下的：

.logo { 
    width:100px; 
    height:44px; 
    background-color:green; 
    float:left; 
} 

.navItems { 
    float:right; 
    background-color:red; 
    width:100px; 
    height:44px; 
} 

或者更好的是，這將工作動態：

$(document).ready(function(){ 
    var navheight = $(".navBar-wrapper").height; 
    $(".logo").css("height",navheight); 
    $(".navItems").css("height",navheight); 

}); 

終於還是，看起來有點深入引導的例子。想起「navbar-brand」和「navbar-text」類。

祝你好運，我希望有所幫助！

Answer 2

你兩種元素提供了一個100pxwidth，但是你忽略height。