为960.gs框架添加额外的边距而不会破坏它的目的

Question

我有一个我想要完成的设计，并找到了使用960gs框架实现它的两种方法。虽然我不知道哪一个更好，但是关于CSS的最佳实践的信息并不像PHP那样。所以我应用了我从vanilla 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框架中的错误，找不到

Answer 1

您的色谱柱宽度为960px，看起来很好。 box-shadow和列之外的左/右额外宽度可以在不声明不同宽度的情况下进行，因此不会创建水平滚动条。

工作示例：http://jsfiddle.net/q8brv/使用绝对定位标题的装饰的左右部分（兼容性IE8 + .IE7-可以没有盒子阴影和这个装饰imo;）

分辨率为1024px的上限为1004px，但它是为了最大化浏览器窗口。