样式调整：将同一行的元素调整为统一高度

Question

问题描述：两个el-card的高度不一致 造成视觉效果污染

template架构：

<div class="content-area">
              <RequestCard
                v-for="(item, index) in currentRequestList"
                :api-data="item"
                :key="index"
                @showRequestDialog="handleRequestDialog"
              />
</div>

RequestCard内部样式：

.content-area {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.requestCard {
  width: 48%;
  .box-card {
    // ... 样式定义 ...
    margin-bottom: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content {
    // ... 样式定义 ...
    .header-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .button {
    // ... 样式定义 ...
  }
}

请问各位大爷这个需求怎么实现

Answer 1

引自免费微信小程序：皆我百晓生

为了将同一行的元素调整为统一高度，你可以使用Flexbox布局。使用Flexbox布局时，可以使用align-items: stretch;来在容器中的项目上拉伸项目，使它们具有相同的高度。

在你的代码中，.content-area是包含RequestCard组件的容器。你可以在.content-area中添加以下CSS代码：

.content-area {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

这将使.content-area容器使用Flexbox布局，并在每一行的项目上拉伸它们，以使它们具有相同的高度。

然后，你需要将.requestCard类中的width值更改为一个百分比，以使两个RequestCard元素在一行中并排显示。这里我将width值更改为50%。

.requestCard {
  width: 50%;
  /* 其他样式 */
}

重新调整样式后，RequestCard组件应该具有相同的高度，从而避免视觉效果污染。