使用VUE组件的CSS DIV对齐问题

我有一个vue应用程序，它有两个组件。每个组件都位于自己的div中。我正在使用我发现的CSS，因为我不擅长CSS。一切都很好，反应灵敏，但我注意到顶部div和底部div没有正确对齐。当页面调整大小时，两个组件的宽度不保持相同。我用的是vuetify。我怎样才能解决这个问题

<div id="app">
 <div class="row">
  <div class="col-xs-6"><sp_card></sp_card></div>
  <div class="col-xs-6"><sp-card2></sp-card2></div>
 </div>
</div>

---

这里是

当您使用这样的百分比宽度时，您必须自己计算正确的值。css的重要部分如下：

.card{
宽度：15.66%；
利润率：0.5%；
}
.card2{
宽度：49%；
利润率：0.5%；
}

这样，底部的卡片将占50%，包括其边距，顶部的卡片将占相同的宽度，边距为0.5%。顺便说一句，当边距设置为百分比时，它是从两个方向上的父宽度计算出来的

---

15.66%

的计算公式为：

（50%-0.5%*6）/3

，其中

6

是左右页边距的数量，

3

是最上面一行的卡片数量。

嗨，简，我诚恳地尽我所能理解你的答案，但我就是无法将我的大脑围绕它。但是它成功了！谢谢

Vue.component('sp_card',{
  data: function(){
    return {
      num: 3
    }
  },
  template: `
<div>
  <div class="card" v-for="n in num">
    <div class="container">
      <h4><b>Card Title</b></h4> 
      <p>By | date</p> 
      <p>Text</p>
    </div>
  </div>
</div>
`
})

Vue.component('sp-card2',{
  data: function(){
    return {

    }
  },
  template: `<div>
<div class="card2">
    <div class="container">
      <h4><b>Horizontal Card Title</b></h4> 
      <p>By | date</p> 
      <p>Text</p>
    </div>
  </div>
  </div>`
})
new Vue({
  el:"#app",
  data: {

  }
})

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 15%;
  border-radius: 5px;
  display:inline-block;
  margin: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}

.card2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 49%;
  border-radius: 5px;
  display:inline-block;
  margin: 5px;
}

.card2:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}