流体宽度不起作用

Question

我正在使用两个 css 文件 [此处用于我的流体宽度网站][1]：一个在低于特定宽度时左侧导航为 'display:none'。

我将右侧导航（带有横幅）设置为最大宽度：348 像素和填充左侧：20 像素。

当我将#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;
}

错误页面：here

Answer 1

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

举个例子，当你把屏幕尺寸缩小到 #main-content 是 824px 宽时，你最终会得到；

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

#middle: 72.3% = 595.72px 加边距 = 42px（每边 21px）

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

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

*基于 cmets 进行编辑。

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

因此，如果整个 #content-wrapper 的宽度为 1069 像素，则您拥有；

.right-nav: 348px

#main-content = 716px;内边距：40 像素（左 20 像素，右 20 像素）。

Total = 1104px，#main-content 下降。导致问题的是相对（%s）和绝对（像素）的混合。