我正在尝试使用 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;
}
最佳答案
切换 HTML 中 #content 和 #sidebar div 标签的顺序将解决此问题，因为您使用的是相反的 float 技术: http://jsfiddle.net/vrdZZ/
关于html - 为什么我的侧边栏被推到内容下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12696580/