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

Question

我有一个包含 2 个组件的 vue 应用程序。每个组件都在自己的 div 中。我正在使用我发现的 CSS，因为我不擅长 CSS。一切都很好并且反应灵敏，但我注意到顶部 div 和底部 div 没有正确对齐。当页面调整大小时，这两个组件的宽度都不相同。我正在使用 vuetify grid system。我该如何解决？

<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>

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);
}

这是pen

Answer 1

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

.card {
  width: 15.66%;
  margin: 0.5%;
}

.card2 {
  width: 49%;
  margin: 0.5%;
}

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

15.66% 由以下公式计算得出：(50% - 0.5% * 6) / 3 其中6 是左右边距数，3 是顶行中的卡片数。