使用 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 是第一行的卡片数。