2

我正在尝试使用 HTML 和 CSS 设置模板，但我的侧边栏有问题。它似乎被推到了我的内容之下，尽管它应该是在左边。我想不通为什么？有没有人有什么建议？

示例：http: //jsfiddle.net/zDdfn/

HTML：

<head>
<title>working</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"> 

    <div id="banner">  </div> <!-- End banner div -->

    <div id="navcontainer">     
        <ul id="navlist">
            <li><a href="index.php">HOMEPAGE</a></li>
            <li><a href="about.php">ABOUT</a></li>
            <li><a id="current" href="index.php">HOMEPAGE</a></li>
            <li><a href="index.php">HOMEPAGE</a></li>
        </ul>
    </div> <!-- End navcontainer div -->



    <div id="content">main content
     </div> <!-- End content div -->


    <div id="sidebar"> sidebar content
    </div> <!-- End sidebar div -->



    <div id="footer"> foooter </div> <!-- End footer div -->



</div> <!-- End container div -->

</body>

和 CSS

html, body {
    height: 100%; /* Required */
    }

body {
    margin : 0;
    padding : 0;

    font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
    line-height : 1.8em;
    color : #000000;
    background : #F5F5FF; 
    }

#container {

    position: relative;
    min-height: 100%;
    width : 800px;
    margin : 0 auto 0 auto;
    border-style: solid;
    border-width:1px;
    background : #FFFFCC;
    }




#banner {

    color : #000000;
    border-style: solid;
    border-width:1px;
    height : 150px;
    background : #fff
    }    



#content {
    min-height: 100%;
    float:right
    padding : 10px;
    margin-left : 200px;
    margin-bottom : 10px;
    color : #666;
    background : #F5EBCC;
    border-left-style:dotted;
    border-left-color:#8F8F00;
    border-bottom-style:dotted;
    border-bottom-color:#8F8F00;
    }



#sidebar {

    float : left;
    width : 20px;

    padding : 10px;

    color : #000000;

    border-style: solid;
    border-width:1px;
    }


#footer {
    clear:both;
    position:relative;
    bottom: 0;
    width: 800px;
    background : #FFFFCC;
    } 

#navcontainer {
    background:#E0E066;

    }

#navlist {
    list-style: none;   /* list-style: none removes bullets */
    margin: 0px;
    padding : 0.5em 0;
    }

#navlist li {
    display: inline;
    margin : 0;
    }

#navlist li a {
    padding : 0.5em 0.5em;
    margin: 0;
    color : #000;
    background : #B8B800;
    text-decoration : none;
    }

#navlist li a:hover {
    color : yellow; 
    background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat;
    }

#navlist li a#current {
    color :  #fff;
    background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat;
    }
4

2 回答 2

2

在 HTML 中切换 #content 和 #sidebar div 标签的顺序将解决此问题，因为您使用的是相反的浮动技术：http: //jsfiddle.net/vrdZZ/

于 2012-10-02T19:06:35.730 回答
0

#content 规则中的浮动后缺少一个分号。

于 2012-10-02T19:11:50.267 回答