如何制作具有未知列数的网格布局,并且每列具有相同的大小?

时间:2015-08-11 06:52:51

标签: javascript html css twitter-bootstrap twitter-bootstrap-3

我需要创建一列列,其中列数可以是5到10,每列的宽度应该相等,如何通过仅使用css而不使用<table>来实现此目的?

现在我使用引导程序,但它只有固定大小。我现在通过Google搜索找到的所有解决方案都在使用<table>元素进行演变,但据我所知,这是错误的方法,我听过很多次不使用<table>用于模板化。

我迄今为止考虑过的最优雅的解决方案(尚未测试)是通过javascript动态计算宽度并在飞行中更改它,是否有另一种更好的方法?

谢谢。

2 个答案:

答案 0 :(得分:10)

使用flexbox

父元素的CSS中应该有display: flex。它的每个子节点(列)都应该有flex: 1(这样可以使元素尽可能地缩小和增长,而不管内容如何)。

以下是一个例子:

&#13;
&#13;
.container {
    display: flex;
}

.column {
    flex: 1;
    border: 1px solid #000;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用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>

测试它的jsfiddle:http://jsfiddle.net/4be2dhb2

祝你好运!