Question

内容使用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;
}

Answer 1

您不应对多个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/

Answer 2

您应该在内容div之前移动两个侧边栏。一般来说，浮动块允许在其旁边放置块，而非浮动块导致它之后的所有块都低于它。

右侧边栏显示在内容div元素下方

2 个答案:

http://jsfiddle.net/A8Pz3/1/