css - 960网格边界困惑。

Question

我希望这是简单的事情，只是我对 css 缺乏经验。我只是想向一组嵌套的 div 添加单个像素边框。

<div class="grid_11 suffix_1">
  <div class="borderupdown">
    <div class="grid_1 alpha">
      <p>RNK</p>
    </div>
    <div class="grid_1">
      <p>IQ</p>
    </div>
    <div class="grid_8 omega">
      <div class="grid_8 alpha">
        <p>title<p>
      </div>
      <div class="clear"></div>
      <div class="grid_8 omega">
        <p>comments stuff here</p>
      </div>
    </div>
  </div>
</div>

这是 borderupdown 的 CSS

.borderupdown
{
    border-top:1px solid red;
    border-bottom:1px solid red;
    margin-bottom:2px;
}

borderupdown 类只是一个 1px 的顶部和底部边框。我的“理解”是，由于其他 div 嵌套在该类下，因此它应该在所有这些的顶部和底部创建一个 1px 的边框。相反，我让两个边框在视觉上显示在顶部，它们之间有 2px 的边距。我完全不明白为什么。 (以防万一，我使用的是 960 网格系统的流体版本。)

谢谢。

Answer 1

听起来您偶然发现了容器内 float 的元素未包含在容器维度中的问题。 (我相信其他人有更好的措辞方式......)。默认情况下， float 元素不包括在计算任何容器的尺寸中。您正在寻找的东西称为“clearfix”。查看此帖子以获得非常好的详细修复列表:What methods of ‘clearfix’ can I use?