Question

我有一个例子：

HTML：

.root
   .pc25
   .pc25
   .pc25
   .pc25

(inside class 'pc25' has contents)

现在，在CSS中我有：

.root
  width: 400px
  padding: 0 10%
  .pc25
    width: 25%

现在，div与＆＃39; pc25＆＃39; class每个都有100px的宽度。我有什么方法可以让它们的宽度达到90px吗？（＆＃39;容器可用空间＆＃39; = 360px）（导致填充为10％）（360/4 = 90）

Answer 1

没有办法只使用“内容框”而不是整个div的宽度。

如果您使用的是CSS3而无需担心向后兼容浏览器，则可以使用calc()功能（规范here）

然后你可以width: calc(25% - 10px)

但正如您所看到的......手动调整分配元素的百分比可能更明智。如果您知道填充总是占用元素宽度的10％，我会从每个较小的div中减去2.5％。因此，不是给他们所有25％，而是给他们2.5％。如果您的父级是400px，这会将所有这些缩小10px。

最重要的是，这是一个响应式解决方案！一切都是好的方法。遗憾的是，您必须手动调整％大小以考虑此时的填充。

编辑：因为你的填充是根的10％...这变得更加棘手。如果您正在寻找响应式解决方案，则可能需要调整填充的设置方式。