
解决span高度自适应与相邻span高度撑开不一致的问题
本文要解决的问题是:在同一行中相邻的span标签设置了高度自适应,但由于其中一个span的内容撑开了高度,而另一个span却无法自适应撑开的问题。
解决方法:
- 取消el-col的固定高度限制,以便col的高度可以由span高度决定。
- 将align-items属性从center改为stretch,使col占满容器高度。
- 由于col高度受span高度影响,所以要让label的高度自适应,需要将其布局改为flex布局,并设置align-items为center,以便内容居中。
以下是修改后的CSS代码:
.row {
border-bottom: solid .0625rem #9c9c9c;
display: flex;
align-items: stretch; // 调整为stretch
justify-content: center;
.col {
display: flex;
span:not(:last-child){
border-right: solid .0625rem #9c9c9c;
}
::v-deep span {
flex: 1;
word-break: break-all;
word-wrap: break-word;
height: 23px;
line-height: 23px;
}
.label{
background-color: #e0e0e0;
color: #000000;
font-weight: bold;
height:auto;
display: flex; // 添加flex布局
align-items: center; // 内容居中
}
.value{
height: auto;
}
}
}










