向CSS网格系统（如960.gs）中添加填充 [英] Adding padding to a CSS grid system like 960.gs

问题描述

我正在建造一个使用流行的960.gs 16列网格系统的网站。下面是设计相关部分的屏幕截图，其中网格列覆盖在上面：

I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:

问题是白色的现在流行框。因为这有一个白色背景，我想在盒子里面一些填充。足够简单：我在父项中添加了一个< div> ，并用 padding：10px 白色背景。

The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background.

问题出现时，我尝试重新使用网格内< div> 这样。例如，在白色框内，我想链接列表在5列容器内，图像在3列容器（对不起，截图不显示在这个大小）。

The problem comes when I try to re-use the grid inside an 'inner' <div> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size).

我尝试在 .inner 类中重新定义网格列大小，这部分工作 - 每列大小，因为总宽度需要比以前少20px以考虑边距。这适用于在 .inner 容器中只有两个子< div> s 如果有多于或少于2，那么事情就会出现错误。

I tried redefining my grid column sizes inside the .inner class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <div>s inside the .inner container, but obviously if there are more or less than 2 then things start to look wrong.

有没有人有一个很好的策略来处理这种事情？我会愿意只是把填充所有列，不管背景颜色，但不能得到这个工作，像我想要的黑客网格。

Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.

谢谢
Matt

thanks Matt

推荐答案

960gs有一个 .alpha .omega 允许嵌套的类。通常这会从应用它的元素中删除前10px和后10px边距。你可能可以逆转这些，并滥用它们给你所需要的填充 - 整个列的宽度会累加，但是填充将在错误端。

the 960gs has an .alpha and .omega class for allowing nesting. Usually this removes the leading 10px and trailing 10px margin from the elements you apply it to. You might be able to reverse these and misuse them to give you the padding you need - the overall column widths would add up, but the padding would be on the "wrong" side

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

我没有测试过，所以不确定它会工作

I haven't tested this though so not sure that it would work

这篇关于向CSS网格系统（如960.gs）中添加填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！