如何使动态数div占用它们的容器中的所有空间？ [英] How do I make a dynamic number of divs occupy all of the space in their container equally?

问题描述

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

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.

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

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

我试过这个没有效果。

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

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

感谢您提供任何帮助！

推荐答案

使您的html分隔符的行为像一个表集。默认情况下，表格分隔符（< td> ）表示均匀分布。

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

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/

这篇关于如何使动态数div占用它们的容器中的所有空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！