Html 右侧边栏显示在contentdiv元素下面
内容使用边距居中：0自动；右侧栏向右浮动。侧边栏位于右侧，但在内容框下方显示一个级别。如果有什么我可能遗漏了，请让我知道，我会上传 注意：很抱歉，我可能上传了多余的代码，但我想上传所有内容以确保安全 编辑：包含的头文件只是div元素，高度：50px宽度：100%；这也没问题Html 右侧边栏显示在contentdiv元素下面,html,css,Html,Css,内容使用边距居中：0自动；右侧栏向右浮动。侧边栏位于右侧，但在内容框下方显示一个级别。如果有什么我可能遗漏了，请让我知道，我会上传 注意：很抱歉，我可能上传了多余的代码，但我想上传所有内容以确保安全 编辑：包含的头文件只是div元素，高度：50px宽度：100%；这也没问题 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> &
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<?php include('includes/header.php'); ?>
<div id="wrapper">
<div id="sidebar">
<div id="menu1" class="menuItem">
<h3>Navigation</h3>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About us</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="menu2" class="menuItem">
<h3>Box 2</h3>
<ul>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
</ul>
</div>
<div id="menu3" class="menuItem">
<h3>Box 3</h3>
<ul>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
</ul>
</div>
</div>
<div id="content">
<p>content</p>
</div>
<div id="sidebar">
<div id="menu1" class="menuItem">
<h3>Navigation</h3>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About us</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="menu2" class="menuItem">
<h3>Box 2</h3>
<ul>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
</ul>
</div>
<div id="menu3" class="menuItem">
<h3>Box 3</h3>
<ul>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
<li><a href="#">Link here</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
您应该在内容div之前移动两个侧栏。一般来说，浮动块允许将其后面的块放在其旁边，而非浮动块使其后面的所有块都位于其下面。您应该在内容div之前移动两个侧栏。一般来说，浮动块允许将其后面的块放在其旁边，而非浮动块则使其后面的所有块都位于其下面。您不应该对多个HTML元素使用相同的ID。这就是使用ID而不是类的意义所在。在侧边栏上使用不同的ID，并使用CSS正确移动它们 这是你的魔法
div#wrapper {
max-width: 1024px;
position: relative;
display: block;
margin: 0 auto;
}
#sidebar {
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.menuItem {
border-radius: 15px;
background: gray;
width: 200px;
float: left;
margin-bottom: 20px;
}
#content {
width: 400px;
height: 500px;
background-color: gray;
margin:0 auto;
}
#sidebar2 {
width: 200px;
float: right;
position: absolute;
right: 0;
top: 0;
}
不能对多个HTML元素使用相同的ID。这就是使用ID而不是类的意义所在。在侧边栏上使用不同的ID，并使用CSS正确移动它们 这是你的魔法
div#wrapper {
max-width: 1024px;
position: relative;
display: block;
margin: 0 auto;
}
#sidebar {
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.menuItem {
border-radius: 15px;
background: gray;
width: 200px;
float: left;
margin-bottom: 20px;
}
#content {
width: 400px;
height: 500px;
background-color: gray;
margin:0 auto;
}
#sidebar2 {
width: 200px;
float: right;
position: absolute;
right: 0;
top: 0;
}
请对此做一个JSFIDLE：是否有任何理由在html导航框2和框3中出现2次？An不知道问题出在哪里：）您还有两个div，带有
id=“sidebar”id=“sidebar”