我已经开始在一个全新的网站上工作,我已经玩了一段时间的设计,但我似乎遇到的一个问题是关于定位导航栏的全屏宽度固定为滚动。在我的下面创造了一个 div
称为“包装器”,设置为宽度为中心 980px
。下面是代码示例;
<style>
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
}
#wrapper {
margin: 0 auto;
width: 980px;
}
</style>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div>
</div>
我在“包装器”中创建的盒子应该(显然不是因为我做错了什么 - 某处)坐着 5px
以下 navBar
但是因为我已经习惯了 position: fixed
它坐在它下面。任何人都可以引导我解决这个问题并将其设置为使得包装器直接位于导航栏的下方而不是位于导航栏的下方,同时保持其中心位置?
组 top:0
在你的 navbar
并在你的上加30px margin-top wrapper
DIV
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top:0
}
#wrapper {
margin: 30px auto 0;
width: 980px;
}
http://jsfiddle.net/duncan/NkRxQ/
完整的解决方案来解决您的问题
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#navBar {
background: RGB(0, 0, 0);
height: 30px;
position: fixed;
width: 100%;
top: 0;
}
#wrapper {
margin: 30px auto;
width: 980px;
background: #ccc;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="navBar">
</div>
<div id="wrapper">
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;">
<!-- You can create left side elements here (without any float specification in CSS) -->
</div>
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;">
<!-- You can create right side elements here (without any float specification in CSS) -->
</div>
<div class="clear"></div>
</div>
</body>
</html>
启动全新网站应包含所有标签的DOCTYPE和0保证金。 (非常有用的东西)。