如何使一个网格布局与未知数量的列，每一列有相同的大小

How to make a grid layout with unknown number of columns and each column has equal size?

本文关键字：一列 网格 何使一 布局 未知数      更新时间：2023-09-26

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

现在我正在使用一个bootstrap，但它只有固定的大小。我通过谷歌找到的所有解决方案现在都在使用<table>元素，但据我所知，这是错误的方法，我已经听过很多次不要使用<table>作为模板。

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

谢谢。

使用flexbox.

父元素的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>

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

祝你好运!

相关文章：