下面一行的元素是不可见的

Question

我在行和列中显示图像元素，但下一行的第一个元素始终不可见。我通过 keyEvents 添加和删除元素类（这是我在下面说的意思，它意味着在 currentIndex 的下面）。我希望它们正确对齐。此外，我不允许使用 flexbox 或 grid，因为该应用程序将在旧浏览器中运行。HTML代码：

  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div>
      <Channel v-for="(channel,index) in channels" :key="index" :channel="channel" :ref="index"/>
      </div>
    </div>
  </div>

<style scoped>
.container {
  display: inline-block;
  /*flex-flow: row wrap;
  /*min-width:1200px;
  overflow-x:auto;      */
  justify-content: center;
}
.container::after {
  content: "";
  flex: 0 1 32.7%;
}
div {
  text-align: center;
}
div > div > div > div {
  padding: 0 4px;
  float: left;
}
@media only screen and (max-width: 1199px) {
  .container::after {
    content: "";
    flex: 0 1 38.7%;
  }
}
</style>

通道组件：

<div v-if="channel.ChName">
      <img :src="'http://portal.uyanik.tv/resize.php?img='+channelPath+'&type=stb'" :class="{selectedIndex:this.$vnode.key === this.$parent.currentIndex}">
</div>

<style>
div > img{
margin: 10px;
}
.selectedIndex {
  border: 5px solid;
  border-color: aquamarine;
  opacity: 0.8;
  transition: 0.2s;
}
</style>

这是它现在的样子此外，当您查看正确的图像时，下一行中直到同一列的所有图像也都将不可见：

编辑：如果我将 img 的高度固定为 100px，错误就会消失，但我不允许这样做，因为设备消耗太多内存来处理此任务。