Blueprint CSS框架或任何网格系统:修复边界div

Question

我在尝试布局我的网站时遇到了一些问题。我正在使用Blueprint Framework，当我将边框应用到我的div时就会发生这种情况。因为它们的宽度是由span-XX (或者我在960gs中注意到的grid-xx )控制的，所以当我将边框应用到我拥有的任何div元素时，它就会从网格中消失，如下面的图片所示

Click to zoom

Click to zoom

我所知道的修复它的唯一方法是改变元素的宽度，但是然后框架的网格目的就结束了，因为我不再有span-XX类了。有没有其他方法来修复它？

Answer 1

如果我没理解错的话，你有一个span-24或者类似的东西，并且想给它添加一个边框，对吧？我喜欢这样做的方式是

<div class="span-24">
    <div class="box">here</div>
</div> 

并将边框添加到上述代码片段的box类中。

Answer 2

如果不想嵌套div，可以为有边框的列创建一些额外的类。我使用1px的边框，所以我创建了这样的类：

.with-border-first {
  border: 1px solid red;
  margin-right: 8px;
}

.with-border {
  border: 1px solid red;
  margin-left: -1px; 
  margin-right: 9px;
}

.with-border-last {
  border: 1px solid red;
  margin-left: -2px;
}

如果您想要跨越所有列的div周围的边框，则应该再增加一个。蓝图中的24 )。

然后，我将这些类与跨度一起使用，例如：

<div class="span-8 with-border-first">
...
</div>

<div class="span-8 with-border">
...
</div>

<div class="span-8 last with-border-last">
...
</div>