问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
请你学习
    1162289

    image.png
    html

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

    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;
            }
    htmlcss3前端
    阅读 1.1k
    avatarAI BotBETA

    你的问题是关于在同一行相邻列中，一个单元格的高度不能随着内容的增多而自动撑开的问题。这种情况通常发生在 flex 布局中，当相邻的元素高度被设置为固定值或百分比，而不是设置为 'flex' 或 'auto'。

    在你的代码中，.col 的高度被设置为 100%，这意味着它的高度是其父元素 .row 的高度。而 .row 的高度在默认情况下是自动的，会随着其内容（也就是两个 .col）的增加而增加。因此，当 .col 中的 .label 和 .value 的内容增多时，.col 的高度应该也会增加。

    但是，问题可能出在 span 元素的 flex 属性上。在你的 CSS 中，你为 ::v-deep span 设置了 flex: 1;，这会使得每个 span 在 .col 中都尽可能地占据更多的空间。这可能导致 .col 内部的 span 元素（即 .label 和 .value）的高度被限制，即使内容增多也不能增加高度。

    一个可能的解决方案是调整 .col 的 flex 属性，让它可以垂直扩展以适应内容。你可以试试以下 CSS：

    .row {
    /* 其他样式保持不变 */
    align-items: stretch;  /* 允许 column 垂直扩展 */
}
.col {
    /* 其他样式保持不变 */
    display: flex;
    align-items: flex-start; /* 使 column 的内部元素从顶部对齐 */
}
::v-deep span {
    /* 其他样式保持不变 */
    flex-grow: 1; /* 使内部元素根据可用空间进行扩展 */
}

    这样，当 .label 和 .value 的内容增多时，.col 的高度应该能够随之增加。希望这个答案能够解决你的问题。

    1 个回答
    得票最新
    头像
    hfhan
      29k72241
      ✓ 已被采纳

      因为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;

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题