Question

我在CSS中定义了像这样的容器背景;

.container {
    background:#fff;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    width:970px;
    border:1px solid #000;
    padding:5px 10px;
}

问题是我有一个放在容器底部的jqGrid（靠近底边），当它最初绘制时它确实适合容器面板并且看起来正确。这样的事情（请原谅我的非l33t图形技能）：

alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg

但是当我用行填充网格时，它会超出容器，看起来非常俗气，就像这样（我在原始容器背景边缘盘旋）：

alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg

我确信我在使用CSS做错了。任何建议将不胜感激。

编辑：问题不是宽度，而是容器的高度与现在填充的网格的新高度重叠

Answer 1

.container { overflow:hidden; }

假设您正在处理浮动，这是使容器实际包含它们的一种方法。

Answer 2

当你在里面漂浮时，我已经看过很多次这种情况。在关闭容器之前添加清除div。你应该总是在漂浮后清理。

<div class="container">
  <div id="nav" style="float:left;">
  ...
  </div>
  <div id="grid" style="float:left;">
  ...
  </div>
  <div style="clear:both;"></div> <!-- this does the trick -->
</div>

我不同意adding float to container。虽然这样可行，但是不必要的花车将会给你带来更多问题。只在必要时使用浮子并在浮动时清除它。

另据我的经验，除非您定义overflow，否则height并不代表任何内容。我认为在容器上设置溢出不会解决这个问题。如果我错了，请在评论中纠正我。

Answer 3

您的容器是固定宽度的，不会长大。您可能正在寻找的是最小宽度。换句话说，改变：

width:970px;

为：

min-width:970px;

作为一个注释，IE 6和7将宽度视为最小宽度，但其他浏览器则不然。

Answer 4

我认为你需要在CSS中使用它：

overflow: auto;

Answer 5

根据容器和内部网格的浮动情况，您可以执行许多不同的操作。

可能只需添加一个明确的

即可

clear:both;

您也可以浮动父级。调用它，设置浮点数来修复浮点数。所以，如果您的网格有

float:left;

然后你可以添加

float:left;

到你的容器css。我非常喜欢Complex Spiral article on containing floats。

CSS容器没有与网格一起增长？

5 个答案: