0

我正在使用两个 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;
}

错误页面:这里

4

1 回答 1

1

这与#middle 元素的边距有关。您的宽度是百分比,但您的边距是绝对值。

举个例子,当你把屏幕尺寸缩小到#main-content824px 宽时,你会得到;

#left-nav: 20.5% = 168.92px 加上 padding-left = 20px;

#middle: 72.3% = 595.72px 加边距 = 42px(每边 21px)

Total = 828px,因此#middle必须下拉到#left-nav下方

因此,要么减少百分比,要么设置边距百分比,要么为那些较小的宽度添加新的@media 屏幕样式。

*根据评论进行编辑。

再次发生同样的事情 - 您的.right-nav元素具有 348px 的固定宽度,#main-content最大宽度为 67%,但两侧的绝对填充为 20px;

因此,如果整个#content-wrapper宽度为 1069px,则您拥有;

.right-nav: 348 像素

#main-content= 716像素;内边距:40 像素(左 20 像素,右 20 像素)。

Total = 1104px,#main-content 下降。这是导致问题的相对(%s)和绝对(像素)的混合。

于 2012-07-29T13:48:55.080 回答