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

听起来你偶然发现容器中浮动的元素不包含在容器的维度中的问题。（我相信其他人有更好的措辞......）。默认情况下，浮动元素不包括在任何容器的尺寸计算中。您正在寻找的是一个“clearfix”。查看这篇文章，获取一个非常好的详细修复列表：What methods of ‘clearfix’ can I use?

960网格边界混乱。

1 个答案: