Question

我想使用div标签实现一个表。我希望单元格空间始终相等。但在某些屏幕尺寸上则不是。例如4不适合第一行，因此在第二行中显示。
我将text-align设置为left。那就是为什么我们在右边有多余的空间。

1  2  3 --  
4  5  6 --

“-”是右侧的多余空间。

如果我将文本对齐方式设置为居中，则可以解决此问题，但是当我有4个元素时，就会发生这种情况：

1  2  3
   4

在上面的示例中，可以使用空格，但是中间是4，我不希望这样。

我想要的是这个

1  2  3
4

我想要的是

左边1到右边的空间=右边3到右边的空间
2与1之间= 2与3之间的空间

代码：

<style>
body {
    font-family: IRANSansMobileFaNum;font-size: medium;
    background-color: #E8E8E8;
    color: gray;
    text-align: center;
}

.divTable{
    overflow-x: auto;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
    text-align: left;

    margin-left: 0px;
    margin-right: 0px;

}

.divTableCell {
    display: inline-block;
    text-align: center;
    background-color: white;
    vertical-align: middle;
    padding: 2px;
    margin: 4px;
    border-radius: 10px;
    width: 60px;
    font-size: 11px;
    max-width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

img {
    width: 38px;
    height: 38px;
    margin: 4px;
}

</style>
</head>
<body>
    <div class='divTable'>
        <div class='divTableBody'>
            <div class='divTableRow'>
                <div class='divTableCell'><img src='1.png' />
                    <br />1</div>
                <div class='divTableCell'><img src='2.png' />
                    <br /> 2</div>
                <div class='divTableCell'><img src='3.png' />
                    <br />3</div>
                <div class='divTableCell'><img src='4.png' />
                    <br />4</div>

                <div class='divTableCell'><img src='5.png' />
                    <br /> 2</div>
                <div class='divTableCell'><img src='6.png' />
                    <br />3</div>
                <div class='divTableCell'><img src='7.png' />
                    <br />4</div>

            </div>

        </div>
  </div>
</body>

如何使div等间距的表格视图单元格？

0 个答案: