css父容器中子项的动态宽度

Question

在将一组div元素编程为彼此相邻时，我遇到了一个问题。情况如下。

正如您在示例图像中看到的那样，有一些div彼此相邻堆叠（红色，绿色和橙色块）。它们位于具有固定宽度的容器内。每次重新加载页面时，都会有不同的数量的彩色div。我怎样才能将这些均匀地分布在容器中？ （右边空的空间......） 我虽然使用PHP计算宽度百分比（即21.14％）并将其设置为元素。这似乎适用于Firefox，但它不适用于IE或safari / chrome。我想这与IE和webkit 无法分配宽度为21.5像素有关吗？

有可能吗？怎么样？

谢谢！

Answer 1

试试这个：

#parentdiv{
    display: table;
}
.childrendiv{//give children divs the same class
    display: table-cell;
    width: auto;
}

jsfiddle