让span标签高度自适应，实现同一行内列高一致
网页布局中，常常需要同一行内多个列的高度保持一致，尤其当使用span标签时，内容差异可能导致高度不一致。本文通过一个案例，讲解如何解决span标签高度自适应问题，确保同一行内相邻列的高度一致。
问题：列高不一致
假设HTML结构如下：
上平行度 平行度OK/NG
对应的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添加Flex布局，实现内容垂直居中：
.label {
display: flex;
align-items: center;
}
通过以上调整，.col的高度会根据其子元素（span）的内容自动调整，从而使同一行内的所有列高度一致。 关键在于利用Flex布局的特性，让子元素高度自动适应内容。
通过这些调整，即可确保同一行内所有列的高度根据内容自适应，实现高度一致的布局效果。
