如何使用未知的列数和每个列的大小相等的网格布局？

Question

我需要列一排列，列数可以从5到10，并且每个列的宽度应该相等，如何通过仅使用css而不使用<table>来实现这一点？

现在我用的是引导带，但是它只有固定的尺寸。我现在通过googling找到的所有解决方案都在使用<table>元素进行改进，但据我所知，这是错误的方法，而且我多次听到不使用<table>进行模板化的说法。

到目前为止，我想过的最优雅的解决方案(尚未测试)是通过javascript动态计算宽度并动态更改它，还有其他更好的方法吗？

谢谢。

Answer 1

使用挠曲箱。

父元素应该在其CSS中包含display: flex。每个子元素(列)都应该有flex: 1 (这允许元素尽可能缩小和增长，而不管内容如何)。

下面是一个例子：

​

.container {
    display: flex;
}

.column {
    flex: 1;
    border: 1px solid #000;
}

<div class="container">
    <div class="column">Contents don't matter for width.</div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

​

Answer 2

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

CSS：

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

HTML

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

用来测试它的小提琴：http://jsfiddle.net/4be2dhb2

祝好运!