css - 向 960.gs 这样的 CSS 网格系统添加填充

Question

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

问题是白色的“现在流行”框。因为它有一个白色背景，所以我想在盒子里加一些填充物。很简单:我添加了一个 <div>在父级内部并使用 padding: 10px 适本地设置样式和白色背景。

当我尝试在“内部”中重新使用网格时出现问题 <div>像这样。例如，在那个白框内，我希望链接列表位于 5 列容器内，而图像位于 3 列容器内(抱歉，屏幕截图未显示此尺寸)。

我尝试在 .inner 中重新定义我的网格列大小类，这部分有效 - 我从每个列大小中删除了 10 个像素，因为总宽度需要比以前少 20 像素才能说明边距。这适用于正好有两个 child 的情况 <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>

我还没有测试过这个，所以不确定它是否有效