Javascript 如何使网格布局具有未知的列数，并且每列的大小相等？

我需要制作一行列，其中列数可以是5到10，并且每列的宽度应该相等，如何仅使用css而不使用

现在我使用的是引导程序，但它只有固定的大小。我现在通过谷歌搜索找到的所有解决方案都在使用

元素进行改进，但据我所知，这是一种错误的方法，我多次听说不使用

进行模板制作

到目前为止，我一直在思考的最优雅的解决方案（尚未测试）是通过

javascript

动态计算宽度，并动态更改它，还有其他更好的方法吗

谢谢。

使用

父元素的CSS中应该有

display:flex

。它的每个子元素（列）都应该有

flex:1

（这允许元素尽可能地收缩和增长，而不管内容如何）

下面是一个例子：

.container{
显示器：flex；
}
.栏目{
弹性：1；
边框：1px实心#000；
}

内容与宽度无关。

为了与所有浏览器兼容，您可以使用display：

CSS:

HTML

要测试它的JSFIDLE：

---

祝你好运

Flexbox很好！但是兼容性呢？太好了，这正是我所需要的！最新版本有时是不够的。在我看来，flexbox很好，但在我的工作中还不可能使用它，有那么多人使用IE8/IE9之类的工具浏览this@MarcosP埃雷兹古德：对于这些情况，你的解决方案实际上相当好！我发现您可以安全地使用flexbox，因为有很大比例的web用户使用最新的浏览器进行浏览。：）一个好的解决方案是flexbox，并将您的解决方案包装在IE9 CSS黑客中。是的，企业应用程序开发人员面临的问题最多，因为企业和政府在采用新技术方面通常非常非常缓慢。

    .table {
        display: table;
        width: 100%;
    }
    .table .row {
        display: table-row;
    }
    .table .row .cell {
        display: table-cell;
        border: 1px solid red;
    }

    <div class="table">
        <div class="row">
            <div class="cell">&nbsp;</div>
            <div class="cell">&nbsp;</div>
        </div>
    </div>
    <div class="table">
        <div class="row">
            <div class="cell">&nbsp;</div>
            <div class="cell">&nbsp;</div>
            <div class="cell">&nbsp;</div>
        </div>
    </div>
    <div class="table">
        <div class="row">
            <div class="cell">&nbsp;</div>
            <div class="cell">&nbsp;</div>
            <div class="cell">&nbsp;</div>
            <div class="cell">&nbsp;</div>
        </div>
    </div>