'容器可用空间'的CSS％宽度？

HTML：现在

.root 
    .pc25 
    .pc25 
    .pc25 
    .pc25 

(inside class 'pc25' has contents)

，在CSS我有：

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

眼下，的div 'PC25' 类各有宽100px的。有什么办法，我凸轮使他们的宽度90px？（'容器可用空间'= 360px）（导致填充为10％）（360/4 = 90）

2017-01-23 Lan Mai

Ehm ...一个填充10％的400px父级仍然是400px宽。给它一个填充不会使它缩小。 –

对不起...这里的目的是为每个.pc25有90px的宽度..如果你知道我的意思... –

@MrLister - 如果父'box-sizing'设置为''不一定准确， border-box'，那么宽度是包含*的填充。 –

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

如果您正在使用CSS3，无需担心向后兼容的浏览器可以使用calc()功能（SPEC here）

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

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

最重要的是，这是一个响应式解决方案！围绕着一个好方法来做到这一点。可悲的是，您必须手动调整％大小来考虑填充。

编辑：由于你的填充是10％的根...这更棘手。如果你正在寻找一个响应式解决方案，你可能需要调整你如何设置填充。

2017-01-23 19:06:42 minorcase

非常感谢！ –

回答