内容使用 margin:0 auto 居中；右侧栏向右浮动。侧边栏向右移动，但显示在内容框下方的一个级别。如果有任何遗漏的内容，请告诉我，我会上传。
注意:抱歉，我可能上传了多余的代码，但我想上传所有内容以确保安全。
编辑:包含的头文件只是 div 元素，高度:50px 宽度:100%；也没有问题。
<!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>
CSS:
#sidebar{
width: 200px;
float: left;
}
.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;
}
最佳答案
您不应为多个 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;
}
http://jsfiddle.net/A8Pz3/1/
关于html - 右侧边栏显示在内容 div 元素下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24301681/