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项的高度等于最高的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>

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

1 个答案: