Question

我正在预先存在的网站上实施960 grid系统。我正在使用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_10 div太大2像素，因此会在最右边的grid_16 div的末尾悬空。我想我会通过创建一个像这样的新类来解决这个问题：

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

然后将其添加到grid_10 div，如下所示：

<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_5 div被挤压，因此他们现在坐在彼此的顶部，而不是并排，因为水平空间不足（因为grid_10 div是2个像素，比边框在里面更窄，而不是在外面）

那么我该如何解决这个问题（或者它是否可以修复）？我喜欢在div上设置边框的风格，因为它很好地将内容与背景分开。但是，有了边框，我的div宽度会被破坏。我不想像this question中所建议的那样强加额外的列。

我可能会尝试任何魔术？

由于

Answer 1

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

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

Answer 2

为什么不重新定义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系统吸得和桌子一样糟糕。我们不应该写出语义正确的可读文档吗？

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

Answer 3

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

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

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

同样，我认为这可能是一种做事的一种黑客行为方式，但如果我自己也不这样说，那似乎很巧妙：P

jQuery Theme Div边框和960网格系统问题

3 个答案: