html - 为什么一个 div 没有定位在另一个 div 旁边?

标签 html css web position css-float

我正在创建一个网站,但我在定位 div 时遇到了一些问题。 我的 content div 没有定位在 navigation-bar 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 divcontent div 不会彼此相邻放置,而是 content div 将自己定位在下方导航栏 div

谢谢。

最佳答案

你在哪里使用 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
}

关于html - 为什么一个 div 没有定位在另一个 div 旁边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14006271/

相关文章:

java - Wicket 如何处理 cookie,使用/不使用它们有哪些选项?

html - 背景图像过渡部分

javascript - 绝对位置时div高度为0

html - 我的网站在我的桌面上显示为空白页面

html - 为什么导航不在标题的中心对齐?

css - 如何点击外部按钮并保持事件样式? - AlpineJS 和 TailwindCSS

javascript - 在我的 HTML 代码中的何处插入 JavaScript 库和 CSS?

javascript - .html() 中的多个元素

php - 使用 mySQL 在 PHP 中 SQL 不返回结果

javascript - JavaScript 代码中包含引号的 HTML 标签