给span标签内添加高度auto,但身在同一行相邻列,有一个单元格高度由于多内容撑开了,而另一个却不能一起撑开?-灵析社区

满脑子智慧溢出

![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/a0ae389a7e7acb7d33a9e212eb1cd7e0.png) 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; // font-size: 8px; height: 23px; line-height: 23px; } .label{ background-color: #e0e0e0; color: #000000; font-weight: bold; height:auto; } .value{ height: auto; }

阅读量:373

点赞量:4

问AI
因为el-col的高度限制了span的高度。row的高度由col计算来的,col的高度由span计算来的,span的高度是auto,所以span的高度由内容决定,上级col的高度没有等高,只是因为"align-items: center;"居中对齐,首先需要把居中对齐换成"align-items: stretch;"占满整个容器的高度(align-items默认就是这个值),然后去除col设置的"height: 100%;",此时col的高度就变成了和父容器等高。此时可以看到label高度也占满了容器,但是内容少的不有居中,是按照默认属性进行排列的,是下一步就是调整内容居中,方法很多,比如给label设置flex布局"display: flex;align-items: center;"