蓝图 CSS 框架或任何网格系统：修复有边框的 div答案

【问题标题】：Blueprint CSS framework or any Grid system: fix for bordered divs蓝图 CSS 框架或任何网格系统：修复有边框的 div
【发布时间】：2010-08-18 20:31:33
【问题描述】：

我在尝试布置我的网站时遇到了一些问题。我正在使用Blueprint Framework，当我将边框应用于我的 div 时会发生这种情况。由于它们的宽度由span-XX （或grid-xx 控制，正如我在960gs 中注意到的那样），当我将边框应用于任何div 元素时，我让它脱离了网格，如这些图像所示Click to zoom Click to zoom

我知道修复它的唯一方法是更改元素的宽度，但随后框架的网格目的完成，因为我将不再拥有 span-XX 类。有没有其他办法解决？

【问题讨论】：

标签： css gridview grid blueprint-css

【解决方案1】：

如果我理解正确，你有一个span-24 或类似的东西，想给它添加一个边框，对吧？我最喜欢的做法是

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

并将边框添加到上述 sn-p 的 box 类。

【讨论】：

第二个。您始终可以更改框架中元素的宽度，但这有时会在尝试维护有边框和无边框的多个版本时最终导致问题。嵌套 div 从技术上讲有点讨厌，但网格框架的构建更多的是用于原型设计而不是生产用途。 Teja 有一般推荐的解决方案。
第一个例子在这种情况下不会有换行符吗？
我从内部 div 中删除了 span-24 类，并按照你说的做了，但带边框的 div 显示为 1px 高度。其中的 div（包含输入和按钮）显示正确

【解决方案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>

【讨论】：