流体宽度不起作用

Posted 2023-03-07

【中文标题】流体宽度不起作用

【英文标题】：Fluid width not working

【发布时间】：2012-07-27 10:03:34

【问题描述】：

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

【参考方案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）和绝对（像素）的混合。

【讨论】：

已更新答案以反映 cmets，希望对您有所帮助。顺便问一下，您使用的是 Chrome 开发者工具还是 Firebug？您可以使用这些工具打开和关闭 CSS 属性，以查看导致问题的原因。

你可以这样做 - 将它们混合在一起没有问题，我一直这样做。我真的只是让你意识到这是导致问题的原因。您可以稍微减少主容器的 %s，而且我看到您已经在使用@media screen，因此您可以添加另一个断点并在稍小的屏幕上将填充减少到较小的固定量。s

我在 1024res.css 第 11 行中将 #middle 的宽度更改为 70.2% 而不是 71.2%，它看起来不错。在 Structure.css 第 96 行中，将宽度再次减小 1% 至 71.3%，效果也很好

大声笑，别担心！就像现在一样，但正如我在上一条评论中所说的那样下降 1% 似乎效果很好，先试试吧。