Element UI布局：解决同一行相邻列高度不一致
在使用Element UI构建页面时，经常会遇到同一行内相邻列高度不一致的问题。尤其当某一列内容较多导致高度撑大时，其他列高度却无法自动调整。本文将分析并解决此问题，主要针对el-col和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%; /* 限制span高度 */ word-break: break-all; word-wrap: break-word; height: 23px; /* 限制span高度 */ line-height: 23px; } .label { background-color: #e0e0e0; color: #000000; font-weight: bold; height: auto; } .value { height: auto; } }}
当其中一列内容较多时，align-items: center; 会导致列高无法自动适应，产生高度不一致。
解决方案
问题的核心在于align-items: center; 和 height: 100%; 的组合。align-items: center; 将项目垂直居中，但无法自动撑高；height: 100%; 则限制了列高。
解决方法如下：
移除高度限制: 删除 .col 和 ::v-deep span 中的 height: 100%; 以及 ::v-deep span 中的 height: 23px;。让列高和span高根据内容自适应。
调整对齐方式: 将 .row 的 align-items: center; 改为 align-items: stretch; (或直接移除，因为stretch是默认值)。这使得列会占据父容器的全部高度。
内容垂直居中: 如果需要内容垂直居中，则需要在 .label 和 .value 类中使用 flex 布局实现垂直居中：
.label, .value { display: flex; align-items: center;}
通过以上调整，el-col 的高度将根据内容自适应，从而解决高度不一致的问题。 确保 el-row 的高度能够自动适应，避免外部样式限制了 el-row 的高度。
通过这些修改，即使一列内容较多，其他列也能自动调整高度，保持页面布局一致性。
以上就是如何解决使用Element UI时同一行相邻列的高度不一致问题？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563896.html
微信扫一扫 
支付宝扫一扫 
