使用CSS或LESS基于兄弟计数(未固定)计算DIV的宽度

Question

我有100%的父母DIV;

现在,在运行中,它包含n个子DIV.

现在,我希望能够使用calc方法在CSS或LESS中进行caclulate并分配它们的宽度(flex显示在我的实际代码中不起作用,实际上它实际上只处理DIV但实际上是使用d3的svg元素)因此它们的宽度就是这种模式

第n个孩子的宽度DIV =(100%/ n) - 10

我怎样才能实现这一目标？

另外,DIV需要有其他颜色,我已经设法弄清楚如何？

任何想法如何使用css或更少的动态分配宽度？

http://jsfiddle.net/7r029v9n/2/ - 这是Jsfiddle

到目前为止,这是我的代码

.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);
}

Answer 1

当您想要在儿童中分配可用空间时,Flexbox是完美的:

#parent {
  display: flex;
}
.child {
  flex-grow: 1;
  margin: 5px;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var n = Math.round(Math.random() * 10);
for (var i = 0; i < n; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: flex;
  min-width: 400px;
  min-height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  min-height: 200px;
  min-width: 10px;
  border: 1px solid black;   
  display: inline-block;
  flex-grow: 1;
  margin: 5px;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

<div id="parent"></div>

您还可以使用CSS表:

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.child {
  display: table-cell;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var n = Math.round(Math.random() * 10);
for (var i = 0; i < n; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
  min-width: 400px;
  height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  display: table-cell;
  height: 200px;
  width: 10px;
  border: 1px solid black;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

<div id="parent"></div>