为什么我的侧边栏被推到内容下方? [英] Why is my sidebar being pushed below content?
本文介绍了为什么我的侧边栏被推到内容下方?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用HTML和CSS设置模板，并且边栏出现问题.它似乎被推到了我的内容之下，尽管它像应该的那样位于左侧.我不知道为什么吗?有人有什么建议吗?
示例: http://jsfiddle.net/zDdfn/
HTML:
< head>< title>工作</title>< link href ="style.css" rel ="stylesheet" type ="text/css"/></head><身体>< div id ="container">< div id ="banner"></div><！-结束横幅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><！-结束navcontainer div->< div id ="content">主要内容</div><！-结束内容div->< div id ="sidebar">侧边栏内容</div><！-结束侧边栏div->< div id ="footer">foooter</div><！-结尾页脚div-></div><！-结束容器div-></body> 和CSS
html，正文{高度:100％;/* 必需的 */}身体 {裕度:0;填充:0;字体:75％"Trebuchet MS"，verdana，arial，tahoma，sans-serif;行高:1.8em;颜色:#000000;背景:#F5F5FF;}#容器 {职位:相对最低高度:100％；宽度:800px;margin:0自动0自动;边框样式:实心；border-width:1px;背景:#FFFFCC;}#横幅 {颜色:#000000;边框样式:实心；border-width:1px;高度:150px;背景:#fff}#内容 {最低高度:100％；浮动:右内边距:10px;左边距:200px;底边距:10px;颜色:#666;背景:#F5EBCC；border-left-style:点缀；border-left-color:#8F8F00;边框底部样式:点缀；边框底色:#8F8F00;}#sidebar {向左飘浮;宽度:20px;内边距:10px;颜色:#000000;边框样式:实心；border-width:1px;}#footer {清除:两者；位置:相对；底部:0;宽度:800像素；背景:#FFFFCC;}#navcontainer {背景:#E0E066;}#navlist {列表样式:无；/*列表样式:没有可删除的项目符号*/边距:0px;填充:0.5em 0;}#navlist li {显示:内联；裕度:0;}#navlist li a {填充:0.5em 0.5em;边距:0;颜色:#000;背景:#B8B800;文字装饰:无；}#navlist li a:hover {颜色:黄色背景:#8F8F00 url(img/menu_arrow.gif)底部中心不重复；}#navlist li a#current {颜色:#fff;背景:#8F8F00 url(img/menu_arrow.gif)底部中心不重复；} 解决方案
在HTML中切换#content和#sidebar div标签的顺序将解决此问题，因为您正在使用相反的float技术: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>
and 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;
}
解决方案
Switching the order of your #content and #sidebar div tags in the HTML will solve this as you are using the opposing float technique: http://jsfiddle.net/vrdZZ/
这篇关于为什么我的侧边栏被推到内容下方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
