时间戳

首页 > 解决方案 > 使html表格单元格中的所有div与CSS中最高的div具有相同的高度

html - 使html表格单元格中的所有div与CSS中最高的div具有相同的高度

问题描述

我有以下 HTML 代码：

HTML：

<table>

    <tbody>

        <tr>

            <td>
                <div class="item">
                    Item 1
                </div>

                <div class="item">
                    Item 2 <br>
                    More Text <br>
                    Even More Text <br>
                </div>

                <div class="item">
                    Item 3
                </div>

                <div class="item">
                    Item 4
                </div>


                <div class="item">
                    Item 5 <br>
                    More Text <br>
                    Even More Text <br>
                    So Much Text <br>
                    Ok Enough Text <br>
                </div>

                <div class="item">
                    Item 6
                </div>
            </td>

        </tr>

    </tbody>

</table>

CSS：

table tr tbody td {
    width: 800px;
}

.item {
    display:inline-block;
    border: 1px solid black;
    padding: 5px;
    width: 200px;
}

每个单元格的宽度为 800px

单元格中的每个项目将是 200px

所以单元格将有 3 个项目，然后它将包装并有另外 3 个项目

是否可以仅使用 CSS 使所有 div 项的高度等于最高项？目前，每个的高度由其中的文本确定。

标签： htmlcss

解决方案

使用 flexbox 这很简单，尽管这可能会导致一些意想不到的缺点：

table tr tbody td {
    width: 800px;
}

td {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}

.item {
    border: 1px solid black;
    padding: 5px;
    min-width: 200px;
}
<table>

    <tbody>

        <tr>

            <td>
                <div class="item">
                    Item 1
                </div>

                <div class="item">
                    Item 2 <br>
                    More Text <br>
                    Even More Text <br>
                </div>

                <div class="item">
                    Item 3
                </div>

                <div class="item">
                    Item 4
                </div>


                <div class="item">
                    Item 5 <br>
                    More Text <br>
                    Even More Text <br>
                    So Much Text <br>
                    Ok Enough Text <br>
                </div>

                <div class="item">
                    Item 6
                </div>
            </td>

        </tr>

    </tbody>

</table>

推荐阅读