如何使用CSS实现Vuetify中两列组件的同行水平对齐且底部无间距

我来帮你搞定这个对齐问题～从你的代码和效果来看，主要是两列内容高度不一致、默认的margin样式以及垂直分隔线的布局导致的错位，试试下面这些调整方案：

核心修改步骤 #

1. 移除列的底部额外间距 #

你给左侧列加了mb-6类，这个类会给列添加底部margin，直接导致左右两列底部间距不一样。先把这个类去掉：

<v-col cols="12" md="5" sm="6" class="d-flex flex-column">

2. 让子列拉伸到同一高度 #

给内部的v-row添加align-stretch属性，Vuetify会自动让所有子列拉伸到相同高度，确保底部自然对齐：

<v-row class="justify-center align-stretch test">

3. 调整垂直分隔线的样式 #

原来的分隔线固定了高度还加了margin-top，会导致它和列内容不对齐。修改CSS让它和列高度同步：

.vertical{
  width: 2px !important;
  height: auto !important; /* 让分隔线高度随列内容变化 */
  border-color: #201E1C !important;
  align-self: stretch; /* 拉伸分隔线到列的高度 */
  margin: 0 1rem; /* 给左右加间距，避免和文本贴太近 */
}

4. 统一文本的默认margin（可选优化） #

h2和p标签默认自带margin，可能会让内容上下间距不一致，补充CSS去掉这些默认值：

h2{
  font-family: 'Rajdhani', sans-serif; 
  font-weight: bold; 
  font-style: normal; 
  font-size: 3rem; 
  line-height: 3.85rem;
  margin-bottom: 0; /* 移除h2默认底部margin */
}
.short-text{
  font-size: 1.125rem; 
  line-height: 1.125rem; 
  font-style: normal; 
  font-weight: normal; 
  color: #201E1C;
  margin-top: 0; /* 移除p默认顶部margin */
}

修改后的完整代码 #

CSS部分 #

.sub-heading { 
  font-size: 1.25rem; 
  line-height: 1.625rem; 
  color: #F1191D; 
  margin-bottom: 13px; 
  text-transform: uppercase; 
  font-weight: 600; 
}
h2{ 
  font-family: 'Rajdhani', sans-serif; 
  font-weight: bold; 
  font-style: normal; 
  font-size: 3rem; 
  line-height: 3.85rem;
  margin-bottom: 0;
}
.short-text{ 
  font-size: 1.125rem; 
  line-height: 1.125rem; 
  font-style: normal; 
  font-weight: normal; 
  color: #201E1C;
  margin-top: 0;
}
.vertical{ 
  width: 2px !important; 
  height: auto !important; 
  border-color: #201E1C !important; 
  align-self: stretch;
  margin: 0 1rem;
}

Vue模板部分 #

<template>
  <v-container fluid >
    <v-row justify="center">
      <v-col cols="12" md="6">
        <v-row class="justify-center align-stretch test">
          <v-col cols="12" md="5" sm="6" class="d-flex flex-column">
            <h4 class="sub-heading" >Test </h4>
            <h2 >Test1 <br> Post recenti </h2>
          </v-col>
          <v-divider vertical class="vertical hidden-sm-and-down">
          </v-divider>
          <v-col cols="12" md="7" sm="6" class="d-flex flex-column">
            <p class="short-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Felis, pharetra donec id velit tincidunt sed hac fringilla. In est ac fermentum cras. Neque viverra ultricies in at ipsum iaculis pretium, viverra felis. Pretium porttitor leo vulputate imperdiet aliquet etiam eget sit. </p>
          </v-col >
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

这样调整后，左右两列就会在同一行水平对齐，底部也不会有额外间距啦～

内容的提问来源于stack exchange，提问作者Ana