将填充添加到CSS网格系统，如960.gs

Question

我正在建立一个利用流行的960.gs 16列网格系统的网站。这是设计相关部分的屏幕截图，网格列覆盖在顶部：

问题是现在流行的白人＆＃34;＆＃34;框。由于它有白色背景，我想在盒子里面填充一些填充物。很简单：我在父版本中添加了<div>，并使用padding: 10px和白色背景进行了适当的样式设置。

当我尝试在“内部”内部重新使用网格时出现问题。 <div>喜欢这个。例如，在该白色框内，我希望链接列表位于5列容器内，并且图像位于3列容器中（抱歉，屏幕截图并未以此大小显示）。

我尝试在.inner类中重新定义我的网格列大小，这部分有用 - 我从每个列大小中删除了10个像素，因为总宽度需要比以前少20个像素来计算边距。这适用于<div>s容器中只有两个子.inner的情况，但显然如果有多于或少于2，那么事情就会出现问题。

有没有人有一个很好的策略来处理这种事情？我愿意将填充物放在所有列上，无论背景颜色如何，但是在黑客攻击时不能像我想要的那样工作。

感谢 马特

Answer 1

960gs有.alpha和.omega类允许嵌套。通常，这会从您应用它的元素中删除前导10px和尾随10px边距。您可能能够反转这些并滥用它们来为您提供所需的填充 - 整个列宽将加起来，但填充将位于“错误”侧

<div class="container_12">
  <div class="grid_12">
    <div class="grid_5 omega">...</div>
    <div class="grid_3 alpha">...</div>
  </div>
</div>

我没有测试过这个，所以不确定它是否会起作用