css - 如何使动态数量的 div 平均占用其容器中的所有空间？

Question

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

在这个小提琴中，灰色框应该填充三个大小相同的红色、绿色和蓝色矩形。

我试过这个无济于事。

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

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

感谢您的任何帮助，您可以提供！

Answer 1

让你的 html 分隔符表现得像一个表格集。默认情况下，表格分隔符 ( <td>) 旨在均匀分布。

HTML

<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>

CSS

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

见http://jsfiddle.net/sPm9M/

Answer 2

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

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

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