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

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 边框以使其均匀，因此您最终会得到相同的大小和相同的布局。