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

Question

我有以下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项的高度等于最高的？ 当前每个的高度由其中的文本确定。

Answer 1

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