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>