Question

我正在使用960gs，并尝试在不使用内部div的情况下向div添加填充。

你看，如果你向实际div添加填充，它将破坏960gs创建的布局，我找到解决这个问题的唯一方法是在其中创建另一个div并应用填充到那个。

我想这个方法没有问题，我发现第二个div是不必要的，我宁愿不使用它...任何想法？

Answer 1

框尺寸不起作用吗？

div {
    width: 100px;
    box-sizing: border-box;
}

边界框宽度和高度属性包括填充和边框，但不包括边距。这是Internet Explorer使用的盒子模型当文档处于Quirks模式时。

Answer 2

这是任何网格系统的主要缺点之一。不幸的是，据我所知，除了添加额外的标记之外，没有办法解决填充问题。因此，建议添加内部div是一种方法（没有归属于它的“grid_xx”类）。

但是，如果您感觉很勇敢（并准备好进行大量编码），则可以将填充直接归属于子元素。以下是两种解决方案的代码：

<div class="grid_12">
 <div class="inner_div" style="padding:10px">
  <p>This is some sample text</p>
 </div>
</div>

或者你可以省略内部div，并直接在子元素上使用样式：

<div class="grid_12">
 <p style="padding:10px">This is some sample text</p>
</div>

显然你可以使用CSS而不是内联CSS，但原则是相同的：）

希望它有所帮助。

您还可以查看Blueprint或YUI CSS框架，但据我所知，他们有完全相同的问题。