让span标签高度自适应，实现同一行内列高一致
网页布局中，常常需要同一行内多个列的高度保持一致，尤其当使用span标签时，内容差异可能导致高度不一致。本文通过一个案例，讲解如何解决span标签高度自适应问题，确保同一行内相邻列的高度一致。
问题：列高不一致
假设html结构如下：
<el-row class="row"> <el-col class="col">上平行度</el-col> <el-col class="col">平行度OK/NG</el-col> </el-row>
对应的css样式：
.row { border-bottom: solid .0625rem #9c9c9c; display: flex; align-items: center; /* 这里需要修改 */ justify-content: center; .col { height: 100%; /* 这里需要修改 */ display: flex; span:not(:last-child) { border-right: solid .0625rem #9c9c9c; } ::v-deep span { flex: 1; height: 100%; /* 这里需要修改 */ word-break: break-all; word-wrap: break-word; height: 23px; /* 这里需要修改 */ line-height: 23px; /* 这里需要修改 */ } .label { background-color: #e0e0e0; color: #000000; font-weight: bold; height: auto; } .value { height: auto; } } }
当某一列内容较多时，其高度会撑开，而其他列高度不变，导致列高不一致。
解决方案：灵活运用flex布局
问题根源在于父元素（.row）和子元素（.col）以及span之间的高度计算关系。 解决方法如下：
-
调整.row的对齐方式: 将.row中的align-items: center;改为align-items: stretch;。stretch会使所有子元素（.col）的高度填满父元素的高度。
-
移除高度限制: 删除.col和::v-deep span中的height: 100%;以及::v-deep span中的height: 23px;和line-height: 23px;设置。 这些固定高度限制了元素根据内容自适应。
.label { display: flex; align-items: center; }
通过以上调整，.col的高度会根据其子元素（span）的内容自动调整，从而使同一行内的所有列高度一致。 关键在于利用Flex布局的特性，让子元素高度自动适应内容。
通过这些调整，即可确保同一行内所有列的高度根据内容自适应，实现高度一致的布局效果。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
