爲什麼一個div不能放在另一個div旁邊？

我正在創建一個網站，但我在定位的div有一些問題。我的content div沒有放在navigation-bar div的旁邊，即使我將它們都懸浮在左邊。爲什麼一個div不能放在另一個div旁邊？

這裏是HTML代碼。

<head> 
<link rel="stylesheet" type="text/css" href="theme.css"> 
</head> 

<body> 

<div id="title"> 
Sample Title 
</div> 


<div id="navigation-bar"> 
Home 
<br> 
<br> 
Products 
<br> 
<br> 
</div> 

<div id="content"> 
content goes here 
</div> 

</body> 

</html>

這裏是theme.css文件

#title 
{ 
color: black; 
padding: 20px; 
font-size: 250%; 
padding: 2%; 
width: 70%; 
height: 10%; 
border: 4px solid blue; 
} 

#navigation-bar 
{ 
background-color: #606060; 
width: 15%; 
height: 70%; 
color: white; 
text-align: center; 
padding: 2%; 
font-size: 80%; 
border: 4px solid blue; 
} 

#content 
{ 
border: 4px solid blue; 
float: left; 
width: 20%; 
height: 70%; 
}

問題是navigation-bar div和content div慣於位置彼此相鄰，而不是content div自身定位下面navigation-bar div。

謝謝。

來源

2012-12-22 Joe Slater

我很愚蠢，我忘了給我的導航欄div添加'float：left'。 –

如果您正在使用float: left;爲#navigation-bar？

#navigation-bar 
{ 
    background-color: #606060; 
    width: 15%; 
    height: 70%; 
    color: white; 
    text-align: center; 
    padding: 2%; 
    font-size: 80%; 
    border: 4px solid blue; 
    float: left; <--- Add this Here 
}

來源

2012-12-22 20:22:08

哦，我笨。非常感謝。 –

@AnkurSharma歡迎:) –

如何增加一個float: left到#navigation-bar

Demo

來源

2012-12-22 20:21:51 Horen

爲什麼一個div不能放在另一個div旁邊？

回答

相關問題