960网格边界混乱。

我希望这是简单的东西，只是我的经验与CSS。我只是试图添加一个像素边框到一组嵌套的div。960网格边界混乱。

<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网格系统。）

谢谢。

来源

2013-02-16 TheEditor

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

来源

2013-02-16 15:59:42

Brian，谢谢。我甚至不会假装我明白为什么，但它是有效的。非常感谢你。 – TheEditor 2013-02-16 16:07:40

960网格边界混乱。

回答

相关问题