Question

我使用了两个css文件[我的流体宽度网站] [1]：左手导航的一个是＆＃39; display：none＆＃39;当低于一定宽度时。

我将右手导航（带横幅）设置为最大宽度：348px，填充左侧：20px。

当我将#main-content div设置为百分比宽度时会出现问题：当窗口缩小时，它没有正确调整大小并导致其下降到右侧导航栏下方。它确实没有意义，所以不确定最好的方法是什么。

在#main-content div中，有＃left-nav和#middle div左移，我指定了max-widths和padding。

当窗口低于某个宽度时，我会用display：none删除左侧导航，但在此之前，我希望#main-content width是流畅的。

左侧导航也需要是特定宽度，以确保列表项保持在一行。

希望有人可以提供帮助;它可能很简单，但却无法使其发挥作用..

这里是 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）

总计= 828px，因此#middle必须下拉到＃left-nav

因此，要么降低百分比，调整边距百分比，要么为较小的宽度添加新的@media屏幕样式。

*根据评论编辑。

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

因此，如果整个#content-wrapper的宽度为1069像素，那么

.right-nav：348px

#main-content = 716px;填充：40px（左侧20px，右侧20px）。

总计= 1104px且#main-content下降。这是引起问题的相对（％s）和绝对（像素）的混合。

流体宽度不起作用

1 个答案: