如何将此 Vuetify（引导程序）v-col 与其父行的底部对齐？

Question

我已经尝试了我能想到的所有方法，但无法将“阅读更多”超链接放置在父行的底部，因此“阅读更多”位于容器的右下角。对齐或对齐的组合似乎没有帮助。

文章图像应该位于左侧，然后文章标题位于图像的右侧，“阅读更多”位于整个面板的右下角。我认为最简单的方法是将超链接的列与 v 行的底部对齐，然后仅使用 text-right 进行格式化。

  <v-row>
    <v-col>
      <h1 style='display: inline'>{{article.title}}</h1> <span style='font-size: x-small'>{{article.month}}.{{article.day}}.{{article.year}}</span>
    </v-col>
  </v-row>
  <v-row style='padding: 0px; margin-top: -25px; margin-bottom: -15px'>
    <v-col>
      <hr>
    </v-col>
  </v-row>
  <v-row>     
    <v-col md='4' class='text-center'>
      <img :src="article.image" class='article-image'>
    </v-col>      
    <v-col>
      <v-row>
        <v-col>
          <p>{{article.header}}</p>
        </v-col>
      </v-row>
      <v-row>
        <v-col class='text-center'>
          <a>>>> Read More <<<</a>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

最终的解决方案，包括两个阅读部分：

<template>
<v-container fluid class='content-body'>
  <v-row>
    <v-col cols="12">
      <h1 class="ml-2" style="display: inline">{{ item.title }}</h1>
      <span style="font-size: x-small">{{ item.date }}</span>
    </v-col>
    <v-col style='padding: 0; margin-top: -15px; margin-bottom: -15px' cols="12">
      <hr />
    </v-col>
    <v-row v-if='!readMore' class='mb-1 pr-1 pl-1'>
      <v-col md="4" class="text-center">
    <v-img class="ml-1 mr-1 mb-1 article-image" :src="item.image"/>
      </v-col>
      <v-col md="8">
    <v-row class="fill-height" dense>
      <v-col cols="12" class='mb-2 ml-1 mr-1'>
            <h3>{{ item.header }}</h3>
      </v-col>
      <v-col cols="12" class="text-right pb-0 mb-0" align-self="end">
            <v-btn color='#0a0a0a' class='blue--text mr-0' v-on:click="showMore">Read More</v-btn>
      </v-col>
    </v-row>
      </v-col>
    </v-row>    
    <v-row v-else class='mb-1 pr-1 pl-1'>
      <v-col cols='12'>
    <nuxt-content :document='item'/>
      </v-col>
      <v-col cols="12" class="text-right" align-self="end">
        <v-btn color='#0a0a0a' class='blue--text mr-0' v-on:click="showLess">Read Less</v-btn>
      </v-col>
    </v-row>
  </v-row>
</v-container>
</template>

Answer 1

您需要使用<v-col align-self="end">属性来对齐 y 轴。
我修复了你的代码。这是代码片段。

<v-row>
  <v-col cols="12">
    <h1 class="ml-2" style="display: inline">{{ article.title }}</h1>
    <span style="font-size: x-small">{{ article.month }}.{{ article.day }}.{{ article.year }}</span>
  </v-col>
  <v-col
    cols="12"
    ><hr />
  </v-col>
  
  <v-col md="4" class="text-center">
    <v-img class="ml-2 mb-3" :src="article.image" height="200px"/>
  </v-col>
  
  <v-col md="8" class="text-center">
    <v-row class="fill-height mr-2" dense>
      <v-col cols="12">
        <p>{{ article.header }}</p>
      </v-col>
  
      <v-col cols="12" class="text-right" align-self="end">
        <a>>>>Read More<<<</a>
      </v-col>
    </v-row>
  </v-col>
</v-row>

您可以在CodePen中看到完整的代码。结果如下图所示。