Css 如何使动态数量的div平等地占用其容器中的所有空间？

我有一个容器，其中有一个动态的div数。我希望所有的div都可以放在一条线上，而不需要包装，这样每个div都有相同的宽度。div的数量和屏幕的大小都可以更改。我希望有一个css解决方案

灰色框中应填充三个大小相等的红色、绿色和蓝色矩形

我试过了，但没用

#container {
    width: 400px;
    border: 2px solid #CCCCCC;
}

#container div {
    width: auto;
    display: inline-block;
    height: 200px;
}

---

谢谢你能提供的任何帮助

使html分隔符的行为类似于表集。默认情况下，表分隔符（

）的分布是均匀的

HTML

---

请参见

如果我理解正确，无论容器大小，您希望div具有相同的宽度，并且它们满足所有容器的要求吗

如果是这种情况，很简单，将100除以要包含在容器中的div数，得到每个div的正确宽度百分比

---

在这里：http://jsfiddle.net/XnC6k/3/

我认为，如果不把它们放在一个。。。将始终平均分布..@chris。。我能做到。这是最好的解决办法。答案只需要一行，我想你还需要

表格布局：fixed.tabel div

上的code>。我理解这一点，但由于div的数量发生了变化，我每次都必须用JavaScript重新计算该值。我希望得到一个纯粹的CSS解决方案。+1确实，Milche Patren的解决方案是正确的，我尝试使用计数器CSS“计数器增量”，但无法初始化总计数器，以将宽度除以div的数量。

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
        <div class="td-div">td-div 3b</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

.table-div{display:table} /* you can add table-layout:fixed; to suit your needs ([Yoshi][1])*/
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}