向 CSS 网格系统（如 960.gs）添加填充答案

【问题标题】：Adding padding to a CSS grid system like 960.gs向 CSS 网格系统（如 960.gs）添加填充
【发布时间】：2012-02-16 01:46:12
【问题描述】：

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

问题是白色的“现在很流行”框。由于它具有白色背景，因此我想要在框内进行一些填充。很简单：我在父项中添加了一个<div>，并使用padding: 10px 和白色背景对其进行了适当的样式设置。

当我尝试像这样在“内部”<div> 内重新使用网格时，问题就来了。例如，在那个白框内，我希望链接列表位于 5 列容器中，而图像位于 3 列容器中（抱歉，屏幕截图未以这种大小显示）。

我尝试在 .inner 类中重新定义我的网格列大小，这部分可行 - 我从每个列大小中删除了 10 个像素，因为总宽度需要比以前少 20 像素以考虑边距。这适用于 .inner 容器内恰好有两个子 <div>s 的情况，但显然如果多于或少于 2 个，那么事情开始看起来不对。

有没有人有处理这种事情的好策略？无论背景颜色如何，我都愿意将填充放在所有列上，但是在破解网格时无法像我想要的那样工作。

谢谢马特

【问题讨论】：

标签： css 960.gs

【解决方案1】：

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

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

虽然我还没有测试过，所以不确定它是否会起作用

【讨论】：