Blueprint CSS 框架或任何网格系统：修复有边框的 div

Question

我在尝试布局网站时遇到了一些问题。我正在使用 蓝图框架，当我将边框应用于我的 div 时，就会发生这种情况。因为它们的宽度是由 span-XX （或 grid-xx ，正如我在 960gs），当我将边框应用于任何 div 元素时，它就会脱离网格，如这些图像所示 点击放大 点击缩放

我知道解决这个问题的唯一方法是更改​​元素的宽度，但随后框架的网格目的就结束了，因为我将不再拥有 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>