如何使同一行內(nèi)相鄰列的高度一致？解決span標(biāo)簽高度自適應(yīng)問題

讓span標(biāo)簽高度自適應(yīng)，實(shí)現(xiàn)同一行內(nèi)列高一致

網(wǎng)頁布局中，常常需要同一行內(nèi)多個(gè)列的高度保持一致，尤其當(dāng)使用span標(biāo)簽時(shí)，內(nèi)容差異可能導(dǎo)致高度不一致。本文通過一個(gè)案例，講解如何解決span標(biāo)簽高度自適應(yīng)問題，確保同一行內(nèi)相鄰列的高度一致。

問題：列高不一致

假設(shè)html結(jié)構(gòu)如下：

<el-row class="row">   <el-col class="col">上平行度</el-col>   <el-col class="col">平行度OK/NG</el-col> </el-row>

對(duì)應(yī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;     }   } }

當(dāng)某一列內(nèi)容較多時(shí)，其高度會(huì)撐開，而其他列高度不變，導(dǎo)致列高不一致。

解決方案：靈活運(yùn)用flex布局

問題根源在于父元素（.row）和子元素（.col）以及span之間的高度計(jì)算關(guān)系。 解決方法如下：

1. 調(diào)整.row的對(duì)齊方式: 將.row中的align-items: center;改為align-items: stretch;。stretch會(huì)使所有子元素（.col）的高度填滿父元素的高度。

2. 移除高度限制: 刪除.col和::v-deep span中的height: 100%;以及::v-deep span中的height: 23px;和line-height: 23px;設(shè)置。 這些固定高度限制了元素根據(jù)內(nèi)容自適應(yīng)。

3. 內(nèi)容垂直居中: 調(diào)整后，內(nèi)容較少的列內(nèi)容可能偏下。 為.label添加Flex布局，實(shí)現(xiàn)內(nèi)容垂直居中：

.label {   display: flex;   align-items: center; }

通過以上調(diào)整，.col的高度會(huì)根據(jù)其子元素（span）的內(nèi)容自動(dòng)調(diào)整，從而使同一行內(nèi)的所有列高度一致。 關(guān)鍵在于利用Flex布局的特性，讓子元素高度自動(dòng)適應(yīng)內(nèi)容。

通過這些調(diào)整，即可確保同一行內(nèi)所有列的高度根據(jù)內(nèi)容自適應(yīng)，實(shí)現(xiàn)高度一致的布局效果。