0

我希望这很简单，只是我对 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 网格系统的流体版本。）

谢谢你。

4

1 回答 1

1

听起来您偶然发现了浮动在容器中的元素不包含在容器的维度中的问题。（我相信其他人有更好的措辞方式......）。默认情况下，浮动元素不包括在任何容器的尺寸计算中。您正在寻找的东西称为“clearfix”。查看这篇文章以获得非常好的详细修复列表：我可以使用哪些“clearfix”方法？

于 2013-02-16T15:59:42.287 回答