在不破坏其目的的情况下为 960.gs 框架添加额外的边距

Question

我有一个想要完成的设计，并找到了两种使用 960gs 框架来实现它的方法。虽然我不知道哪一个更好，而且关于 CSS 最佳实践的信息也不如 PHP 那样多。所以我应用了从普通 HTML/CSS 和 PHP OO 中学到的东西，发现它们都不是真正“好”的。

这是我设计的[重要部分]：

基于960gs框架的两种获取方式以及我发现的缺点是：

1. 修改 CSS 以向文本添加边距。然后，在那个 div 中，应用一个 12 列的纯 960gs 系统。这可行，但它使整个宽度比最佳宽度更宽（1000 像素，不适用于 1024x768，9% of browsers）。

2. 使用 24 列模型并将第一列和最后一列留空，因此它们成为边距。这样做的问题是，我将结构元素纯粹用于视觉效果，而且必须将它们写在每个页面的每个部分（不是很干）。

第二个例子：

<div class='grid_22 prefix_1'>    
  <p>
    The theory of relativity transformed theoretical <a href="http://en.wikipedia.org/wiki/Physics" title="Physics">physics</a> and <a href="http://en.wikipedia.org/wiki/Astronomy" title="Astronomy">astronomy</a> during the 20th century. When first published, relativity superseded a 200-year-old <a href="http://en.wikipedia.org/wiki/Classical_mechanics" title="Classical mechanics">theory of mechanics</a> created primarily by <a href="http://en.wikipedia.org/wiki/Isaac_Newton" title="Isaac Newton">Isaac Newton</a>.
  </p>
</div>

我想要的是在我的页面中应用 960gs 框架，并带有一些额外的个性化边距。

那么，你将如何避免我所说的实现我想要的这些问题？

PS，由于960gs框架有bug，不好找

Answer 1

您的专栏是 960 像素宽，看起来还不错。 box-shadow 和列外标题的左/右额外宽度都可以在不声明不同宽度的情况下制作，因此不会创建水平滚动条。

工作示例：http://jsfiddle.net/q8brv/ 对标题装饰的左右部分使用绝对定位（兼容 IE8+。IE7- 可以在没有 box-shadow 和这种装饰的情况下存活 imo ;)）

分辨率为 1024px 的上限是 1004px，虽然它是用于最大化浏览器窗口的。