并列div 等高（任何一个变高，其余随之变高）

原创于 2016-03-17 11:50:03 发布 · 740 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 同时被 2 个专栏收录

6 篇文章

订阅专栏

Html5

3 篇文章

订阅专栏

本文展示了一个使用纯HTML和CSS实现的简单表格布局案例，其中包含三个单元格，每个单元格内放置不同长度的文本内容，并通过设置display属性实现了自适应的断字显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上html

<!DOCTYPE html>
<html>
    <head>
        <style>
            .wrap{
                border: 2px solid red;
                width: 300px;
                display: table;
            }
            .wrap .child{
                width: 100px;
                display: table-cell;
                word-break: break-all;
            }
            .p1{
                background-color: #0080FF;
            }
            .p2{
                background-color: #C09853;
            }
            .p3{
                background-color: plum;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <p class="child p1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
            <p class="child p2">bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
            <p class="child p3">cccccccccccccccc</p>
        </div>
    </body>
</html>