'容器可用空間'的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

非常感謝！ –

回答