为什么一个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旁边？

回答

相关问题