HTML如何实现等高列？多列高度怎么自动匹配？

display: flex;

<div class="container">
    <div class="column">
        <!-- 内容较少 -->
        <p>这是第一列的内容，它可能比较短。</p>
    </div>
    <div class="column">
        <!-- 内容较多 -->
        <p>这是第二列的内容，它可能会非常长，长到需要多行文字来填充，但即便如此，它也应该和旁边的列保持相同的高度。</p>
        <p>再加一段，确保内容足够长。</p>
    </div>
    <div class="column">
        <!-- 内容适中 -->
        <p>这是第三列的内容。</p>
    </div>
</div>

.container {
    display: flex; /* 关键：父容器设置为flex布局 */
    align-items: stretch; /* 默认值，确保子元素拉伸填充高度 */
    border: 1px solid #ccc; /* 方便观察效果 */
}

.column {
    flex: 1; /* 让所有列等宽，并自动等高 */
    padding: 20px;
    margin: 10px;
    background-color: #f0f0f0;
    border: 1px solid #aaa;
}

/* 只是为了区分列 */
.column:nth-child(even) {
    background-color: #e0e0e0;
}

align-items: stretch;

<div class="grid-container">
    <div class="grid-item">
        <p>网格第一项，内容较短。</p>
    </div>
    <div class="grid-item">
        <p>网格第二项，内容可以非常长，多到需要很多行来展示，但它依然会和同行其他项保持高度一致。</p>
        <p>再多一点内容。</p>
    </div>
    <div class="grid-item">
        <p>网格第三项。</p>
    </div>
</div>

.grid-container {
    display: grid; /* 关键：父容器设置为grid布局 */
    grid-template-columns: repeat(3, 1fr); /* 定义三列，每列等宽 */
    gap: 20px; /* 列间距 */
    border: 1px solid #ccc;
}

.grid-item {
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #aaa;
}

float

display: table

display: table;

display: table-cell;

.table-container {
    display: table;
    width: 100%; /* 确保表格占据可用宽度 */
    table-layout: fixed; /* 可选，让列宽更可控 */
}

.table-cell {
    display: table-cell;
    padding: 20px;
    border: 1px solid #aaa;
    background-color: #f0f0f0;
    vertical-align: top; /* 默认是middle，如果内容不多可以调整对齐 */
}

overflow: hidden;

padding-bottom

margin-bottom

overflow: hidden;

.faux-columns-container {
    overflow: hidden; /* 裁剪多余的padding */
}

.faux-column {
    float: left; /* 或者其他布局方式 */
    width: 33.33%;
    padding-bottom: 9999px; /* 一个很大的值 */
    margin-bottom: -9999px; /* 抵消padding */
    background-color: #f0f0f0;
    border: 1px solid #aaa;
    box-sizing: border-box; /* 确保宽度计算包含padding和border */
}

flex-direction

column

row

flex-wrap

justify-content

align-items

@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 列堆叠 */
    }
    .column {
        width: 100%; /* 每列占据整行 */
        margin-bottom: 20px; /* 增加堆叠时的间距 */
    }
}

flex-direction: row;

flex: 1;

grid-template-columns

repeat()

minmax()

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 自动适应列数，每列最小280px，最大1fr */
    gap: 20px;
}

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* 在小屏幕上，所有列都变为单列 */
    }
}