我正在使用两个 css 文件 [此处用于我的流体宽度站点][1]:一个左侧导航在低于某个宽度时为“显示:无”。
我将右手导航(带横幅)设置为最大宽度:348px 和填充左:20px。
当我将#main-content div 设置为百分比宽度时会出现问题:它没有正确调整大小并导致它在窗口缩小时下降到右导航下方。这真的没有意义,所以不确定最好的方法是什么。
在#main-content div 中,有向左浮动的#left-nav 和#middle div,我指定了最大宽度和填充。
当窗口低于某个宽度时,我将使用 display:none 删除左侧导航,但在此之前我希望#main-content 宽度保持流畅。
左侧导航还需要具有特定宽度,以确保列表项保持在一行。
希望有人可以提供帮助;这可能很简单,但无法使其正常工作..
这是CSS:
.right-nav {
padding:0 0 0 20px;
margin:0;float:right;
width:348px;
}
#main-content {
border: 1px solid #e3e3e3;
border-botom:0;
box-shadow: 0px -1px 18px #e0e0e0;
margin-top:-2px;
position:relative;
z-index:1;
float:left;
width:70.2%;
background-color:#fff;
height:100%;
float:left;
padding:30px 0 0;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
#left-nav {
float:left;
width:20.5%;
padding:15px 0 5px 20px;
background-color:#fff;
color:#888;
height:100%;
margin:0;
}
#middle {
width:72.3%;
background-color:#fff;
height:100%;
float:left;
margin:0 21px 5px;
}
错误页面:这里