css - 蓝图 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>