Javascript 基于使用CSS或更少的同级计数（不固定）计算DIV的宽度

我有一个100%的父母离婚

现在，在飞行中，它填充了n个子div

现在，我希望能够仅使用calc方法在CSS中计算和分配它们的宽度，或者更少（flex display在我的实际代码中不起作用，它实际上不只是处理DIV s，而是使用d3处理svg元素），以便它们的宽度在这种模式中

第n个子分区的宽度=（100%/n）-10

我怎样才能做到这一点

此外，DIV s需要有可选的颜色，我已经设法弄清楚了如何选择

你知道如何使用css或更少的css动态分配宽度吗

-这是JSFIDLE

这是到目前为止我的代码

.parent {
    width: 100%;
    height: 50%;
    background: pink;
    border: 1px solid red;
    min-width: 400px;
    min-height: 200px;
}

.child {
    min-height: 200px;
    min-width: 10px;
    border: 1px solid black;   
    display: inline-block;
}

.child:nth-child(even) {
    background: blue; 
    width: calc(100%/n -10);
}

.child:nth-child(odd) {
    background: green;  
    width: calc(100%/n -10);
}

---

当您想要在孩子之间分配可用空间时，Flexbox是完美的：

#父级{
显示器：flex；
}
.孩子{
柔性生长：1；
保证金：5px；
}

var parent=document.getElementById（'parent'）；
var child=document.createElement（'div'）；
child.className='child'；
var n=Math.round（Math.random（）*10）；
对于（变量i=0；i

#父级{
显示器：flex；
最小宽度：400px；
最小高度：200px；
背景：粉红色；
边框：1px纯红；
}
.孩子{
最小高度：200px；
最小宽度：10px；
边框：1px纯黑；
显示：内联块；
柔性生长：1；
保证金：5px；
}
.儿童：第n个儿童（偶数）{
背景：蓝色；
}
.儿童：第n个儿童（单数）{
背景：绿色；
}

---

好的，知道当前CSS中兄弟姐妹数的唯一方法是组合使用

:n个孩子

和

:n个最后一个孩子

，例如

div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
   width: 33.3%; /* if there are 3 divs, make them 1/3 of the container width */
}

---

但是，您需要为您决定支持的元素的任何计数编写这样的选择器，并且下一个选择器的长度都将比上一个长。

您可能需要查看。flexbox链接看起来很有希望！我最近也遇到了同样的问题，最后求助于桌子。。。但愿我能早点看到！这是一个很好的解决方案。然而，当flex无法工作时，我的实际代码要复杂一些。在我的实际代码中，我正在使用d3库，我需要使一行的笔划宽度足够灵活，以便知道它需要多宽。所以，我需要一个解决方案，其中我需要明确设置宽度。如果你能帮忙，那就太好了。非常感谢您的回答：）@Ishita您可以尝试使用flex代码，如果您明确需要宽度，请使用

getComputedStyle