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

I have a container in which there is a dynamic number of divs. I want all of the divs to fit on one line without wrapping such that each div has the same width. Both the number of divs and the size of the screen can change. I'm hoping for a css solution.

我有一个容器,其中有一个动态数量的div。我希望所有的div都适合一行而不包装,以使每个div具有相同的宽度。 div的数量和屏幕的大小都可以改变。我希望有一个css解决方案。

In this fiddle the grey box should be filled with three equally-sized red, green, and blue rectangles.

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

I've tried this to no avail.

我试过这个无济于事。

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

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

Thanks for any help you can provide!

感谢您的任何帮助,您可以提供!

2 个解决方案

#1

Make your html dividers behave like a table set. Table-dividers (<td>) are meant to spread evenly by default.

使你的html分隔符表现得像一个表集。表分隔符()默认均匀分布。

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}

See http://jsfiddle.net/sPm9M/

#2

If I understand correctly, no matter the size of the container, you would like the div to have all the same width and they fulfill all the container?

如果我理解正确,无论容器的大小,你希望div具有相同的宽度,并且它们满足所有容器?

If this is the case, it's simple, you divide 100 by the number of div to include in the container to get the right percentage width of each div.

如果是这种情况,那很简单,你将100除以容器中包含的div数来获得每个div的正确百分比宽度。

Here : http://jsfiddle.net/XnC6k/3/

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

#1