vuetify 使两个 v-flex 部分并排具有相同的高度

Question

我的预期显示：

当前显示：

我尝试通过使用 vuetify 功能使两个表具有响应相同的高度，我目前的尝试如下：

<template>
  <div>
    <v-layout class="duo-table" row wrap>
      <!-- reporting scope table -->
      <v-flex xs6 class="left-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            REPORTING SCOPE
          </div>
          <div class="table-content">
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                246
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col" >
                Total variants assessed
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                63
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col">
                Total drugs assessed
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
      <!-- your risk table -->
      <v-flex xs6 class="right-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            YOUR RISK
          </div>
          <div class="table-content">
            <v-layout row wrap>
              <v-flex xs2 class="right-table-xs2-img">
                <v-img :src="imagePath" height='100%'/>
              </v-flex>
              <v-flex xs10>
                <v-flex height="100%">
                  <v-flex class="right-table-xs10-col">
                    YOUR PHARMACOGENOMIC RESULTS
                  </v-flex>
                  <v-flex class="right-table-xs10-col">
                    30 Drugs Potentially Impacted
                  </v-flex>
                </v-flex>
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
    </v-layout>
  </div>
</template>

我也尝试过使用 flexbox，但也没有用。我在想也许我需要向 img 元素添加一些 CSS？有什么想法可以在这里实现我的目标吗？提前谢谢。

Answer 1

我已经解决了使用 Vuetify 1.x 版本功能和 CSS 的问题

我的模板：

<v-layout row wrap>
  <!-- reporting scope table -->
  <v-flex xs6>
    <div>
      REPORTING SCOPE
    </div>
    <v-layout row wrap>
      <v-flex xs3>
        246
      </v-flex>
      <v-flex xs9>
        Total variants assessed
      </v-flex>
      <v-flex xs3>
        63
      </v-flex>
      <v-flex xs9>
        Total drugs assessed
      </v-flex>
    </v-layout>
  </v-flex>
  <!-- your risk table -->
  <v-flex xs6>
    <div>
      YOUR RISK
    </div>
    <v-layout class="right-table-content">
      <v-flex xs2>
        <v-img :src="imagePath" style="height:100%;"/>
      </v-flex>
      <v-flex xs10>
        <v-layout row wrap>
          <v-flex xs12>
            YOUR PHARMACOGENOMIC RESULTS
          </v-flex>
          <v-flex xs12>
            {{ drugsNum }} Drugs Potentially Impacted
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>

相关CSS样式：

.right-table-content {
  display: flex;
}

关键是将两张表包装在一个容器中。而对于带有图片的右侧表格，我们可以使用 CSS 特性来设置两个带有 flex 显示的部分

Answer 2

如果您使用的是 vuetify 2+，那么 v-layout 和 v-flex 将被弃用，请改用 v-row 和 v-col 并将您的 div 重命名为 v-container 并使用属性 fluid （仅当您想删除默认填充时v 容器）。如果您不使用 vuetify 2，那么我建议您迁移到它。

<template>
  <v-container>
    <v-row>
      <!-- reporting scope table -->
      <v-col cols="6">
        <v-row class="duo-table-header">
          REPORTING SCOPE
        </v-row>
        <v-row class="table-content">
          <v-row>
            <v-col cols="6">
              246
            </v-col>
            <v-col cols="6">
              Total variants assessed
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              63
            </v-col>
            <v-col cols="6">
              Total drugs assessed
            </v-col>
          </v-row>
        </v-row>
      </v-col>
      <v-col cols="6">
        <v-row class="duo-table-header">
          YOUR RISK
        </v-row>
        <v-row class="table-content">
          <v-col cols-="2">
            <v-img :src="imagePath" height='100%'/>
          </v-col>
          <v-col cols="10">
            <v-row>
              <v-col cols="12">
                YOUR PHARMACOGENOMIC RESULTS
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                30 Drugs Potentially Impacted
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>