内容以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之前。一般而言,浮动块允许将其后的块放置在其侧面,而非浮动块会导致其后的所有块进入其下方。

09-17 15:21