1

我一直在一个项目中使用 BluePrint.css 框架。它运作良好。

然而，就像我看过的大多数 CSS 框架一样，它似乎更适合文本重的报纸式布局。当使用它来构建使用“小部件”隐喻（例如 SharePoint 或 iGoogle 等）的 Web 应用程序时，它会变得更加难以使用。关键问题是，在 Web 应用程序中，创建信息的可视化容器通常是标准的。这引入了一个需要填充的框，最终破坏了网格。

另一种解释方法是，如果您的容器框跨越 8 个网格列，您将无法在其中容纳 8 个网格列，因为容器框有填充。

我已经找到了解决方法，但它们都需要添加另一层 CSS，这有点麻烦。在我继续下一个项目之前，我想我会看看是否有其他人遇到过这个问题，并且 a) 找到了一个可以满足这种视觉要求的网格系统，或者 b) 找到了一些巧妙的方法来适应其中一个现有的 CSS 框架。

4

2 回答 2

0

处理此问题的方式是使用具有网格分配的容器/包装器，然后在其中添加带有任意填充/边距的 div。

<style type="text/css">.widgetType {padding: 10px;}</style>
<div class="span-8 column clearfix">
  <div id="myWidget" class="widgetType widgetType-skin-myskin">
    <!-- content -->
  </div>
</div>

事实上，在蓝图中甚至有一个基类可以做到这一点并与网格保持一致，该类是 .box，如果我记得的话，它会添加 1.5em 填充。当然，根据您的喜好，此填充可能太深了，因此您不能使用该类并根据需要使用任意东西

于 2009-12-01T20:05:21.903 回答
0

@roberkules 问我是否曾经提出过解决方案，我们做到了。有点。至少，它在当时达到了它的目的。很长一段时间以来，我一直想写一篇博文，但一直没有时间，所以我会在这里尝试总结一下答案。

总的来说，我们做了两件事。1，我们添加了通过给“.span-x”一个边框而不破坏网格来创建一个“盒子”的能力。2，我们通过在网格系统中添加“一半”和“四分之一”测量的概念，将标准的 24 列结构划分得更细。

为了创建带边框的容器盒，我们添加了一个名为的类span-border（我们尽可能地使用 Blueprint span-x 语法，并使用我们自己的添加）：

注意：所有示例都基于我们的 25px 宽列和 15px 宽边距的网格（每个 span-x 为 40px）。

div.span-border {
margin-left: -1px;
margin-right: 14px;
border-width: 1px;
border-style: solid;
}

因此，每当我们想创建一个带有边框的容器“盒子”时，我们都可以添加该类。例子：

<div class="span-8 span-border">our box</div>

这给了我们一个跨越 8 列的带边框的框。目标是现在允许开发人员在其中创建仍然使用蓝图网格 CSS 的元素，这样我们就不会为页面上的每个小框创建新的 CSS。

假设我们想要在那个盒子里有两列。一个比另一个窄。我们可以放入一个 span-3 和一个 span-5，它们会合身，但它们会撞到盒子的​​边缘，那会很丑。

所以我们所做的是添加一些样式-half来-quarter使用网格的一部分来拉伸事物。

示例 CSS：

.pad-1 {
padding: 20px;
}

这会为周围的 div 添加 20px 的填充，其中水平 = '1' 40px 的网格单元。所以让我们重新编写我们的盒子 HTML：

<div class="span-7 pad-1 span-border">our box</div>

我们的盒子仍然占用 8 个蓝图网格单元，即 7 + 1 = 8。不同之处在于内容空间不是 8 个单元，我们现在有 7 个作为一个完整单元，即用于填充。

我们现在可以在其中添加我们的列：

<div class="span-7 pad-1 span-border">
    <div class="span-3">left column</div>
    <div class="span-4 last">right column</div>
</div>

瞧！我们现在已启用蓝图来处理嵌套元素的概念。

有了这个系统，如果需要，您可以无限嵌套。

随着时间的推移，我们只是稍微调整了一下以适应新情况。例如，我们有时需要将具有奇数列网格的元素拆分为两个相等的列。为此，我们添加了以下概念stretch-x：

.span-1.stretch-half {width:45px;}

.span-1通常为 25px 宽（40px - 15px 右边距）。我们现在已经将它拉伸了 1/2 的完整网格单位 (20px)。

我们将对所有现有的 span-x 设置执行此操作：

.span-2.stretch-half {width:85px;}
.span-3.stretch-half {width:125px;}
.span-4.stretch-half {width:165px;}
...
.span-23.stretch-half {width:925px;}

现在回到我们最初的例子，我们可以这样创建两个相等的嵌套列：

<div class="span-7 pad-1 span-border">
    <div class="span-3 stretch-half">left column</div>
    <div class="span-3 stretch-half last">right column</div>
</div>

3 + 3 + 一半 + 一半 = 7。

所以，这就是我们想出的。随着时间的推移，它对我们很有效。最初找出并调整您的需求有点痛苦，但是一旦构建，它会使快速原型制作变得非常容易，并且如果您可以让每个人都接受网格概念，那么它可以防止大量 CSS 膨胀。

我应该补充一点，如果网站是由一大群人构建和维护的，我肯定会推荐这种方法。如果该站点是由一个人构建的，并且随着时间的推移，源 HTML 不一定需要大量更新，那么这可能有点矫枉过正，并且根据需要编写自己的自定义 CSS 可能会更容易特定站点。

哦！还有一件事： 免责声明：以上都不适用于 IE6，因为 IE6 无法处理同时引用两个类的 CSS。当时，我们不得不支持 IE6。我们所做的只是为 IE6 创建了一个 jQuery 脚本，该脚本将查找，例如，一个带有 div 的 divclass="span-8 stretch-half"并动态地将其替换为一个仅适用于 IE6 的丑陋类span-8-stretch-half。

然后 IE6 得到了一个不同的样式表，其中包含类似的单个类稍微有点臃肿。这很丑陋，但有效，我们真的只是为了抗议而支持 IE6 ;)

于 2011-11-02T18:35:59.457 回答