0

我正在我现有的站点上实施960 网格系统。我正在使用 jQuery 主题，这意味着每个具有内容的 div 都被分配了一个类ui-widget-content，作为主题的一部分，它给它一个 1px 的边框。我喜欢这种边框设计，因为我的内容 div 是白色的，而我的网站的背景是白色的 - 给它一个很好的视觉对比。

然而，我遇到的问题是，使用这些 1px 边框，我无法水平放置 div，因为它们太大了。例如，如果我这样做：

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

这导致grid_10div 太大了 2 个像素，因此，grid_16在最右边的 div 的末端悬空。我想我会通过创建一个像这样的新类来解决这个问题：

.border-fix {
    border-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; }

然后将其添加到grid_10div 中，如下所示：

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

但是，现在，我的两个内部grid_5div 被挤压，因此它们现在彼此叠放，而不是并排，因为水平空间不足（因为grid_10div 比边界窄 2 个像素）里面，不是外面）

那么我该如何解决这个问题（或者它是否可以修复）？我喜欢在 div 上有边框的风格，因为它很好地将内容与背景分开。但是，有了边框，我的 div 宽度被弄乱了。正如这个问题所建议的那样，我不喜欢用额外的列来强制它。

我可以尝试任何魔术吗？

谢谢

4

3 回答 3

1

通常，您不应将其他具有样式的类与用于网格的容器结合起来以防止这种行为。网格系统应按原样采用，如果您需要边框并使用不同的填充或边距，则应将网格单元格内的内容包装在另一个 div 中并将样式应用于该元素 - 否则您将破坏网格。

我知道这会创建额外的 div，但它有助于保持一致的行为。如果您使用固定大小的网格（以 px 而不是 % 定义），您可以从宽度中减去 2px 并为每个单元格添加 1px 边框以使其均匀，因此您最终会得到相同的大小和相同的布局。

于 2012-12-04T15:23:23.913 回答
0

为什么不把 grid_10 的样式重新定义为比以前少 2 个像素呢？（是 580 吗？580-2=578）

<style>
.grid_10 {width:578px}
</style>

<div class="grid_10 alpha ui-widget-content">

或者，如果您无法为所有站点重新定义它，只需去看看 grid_10 应用了什么样式，将它们克隆为新样式 my_smaller_grid_10_with_borders

虽然我是这个，但我仍然想知道在语义上这样的东西有什么区别：

<div class="grid_16 alpha omega">
    <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
...

和这样的：

<table><tr><td>some stuf...</td>...

我要说的是 960grid 系统和桌子一样糟糕。我们不应该编写语义正确的可读文档吗？

（好吧只是题外话，希望解决方案有效）

于 2012-12-04T15:29:27.847 回答
0

我想出了一个我认为不会破坏网格系统的解决方案，我不必编辑任何 div 大小来考虑边框，也不必添加任何奇怪的边距或 1px 填充。也许这有点 hacky，但我所做的只是创建一个像这样的新类：

.border-fix {
    border: 0px;
    box-shadow: 0px 0px 3px grey;
}

并将这个类添加到我想要有边框的任何 div 中。这将覆盖ui-widget-conent该类以删除边框并为框添加阴影。我那里的阴影设计说有一个 0px 的水平移动，一个 0px 的垂直移动，并将阴影模糊 3 px。使用灰色，这看起来几乎与普通边框完全一样，而不会影响我的 div 宽度。

再说一次，我认为这可能是一种老套的做事方式，但如果我自己不这么说的话，它似乎非常聪明：P

于 2012-12-04T19:16:18.670 回答