Question

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

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

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

谢谢。

Answer 1

使用flexbox。

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

以下是一个例子：

＆＃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;

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>

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

祝你好运！

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

2 个答案: