内容以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;
}
最佳答案
您应将两个侧边栏移动到内容div之前。一般而言,浮动块允许将其后的块放置在其侧面,而非浮动块会导致其后的所有块进入其下方。