Html 下一行的元素不可见

我以行和列的形式显示图像元素，但下一行的第一个元素始终不可见。我通过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>

李氏假名
.集装箱{
显示：内联块；
/*柔性流：行换行；
/*最小宽度：1200px；
溢出-x：自动*/
证明内容：中心；
}
.容器：：之后{
内容：“；
弹性：0132.7%；
}
div{
文本对齐：居中；
}
div>div>div>div{
填充：0.4px；
浮动：左；
}
@仅介质屏幕和（最大宽度：1199px）{
.容器：：之后{
内容：“；
弹性：0138.7%；
}
}

通道组件：

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

div>img{
利润率：10px；
}
.selectedIndex{
边框：5px实心；
边框颜色：海蓝宝石；
不透明度：0.8；
过渡：0.2s；
}

下面是它现在的样子，当你浏览右边的图片时，下一行中的所有图片直到同一列都不可见：

---

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

您确定此元素不可见，还是因为您在代码中使用了float而导致对齐问题。。如果上面的图像比其他图像高出至少1px，则可能会发生此类问题。。因此，请检查您的数据和屏幕上显示的元素数量。。他们相配吗。。？请检查图片的大小。。它们是一样的吗？我想这是因为我在一个元素后面加了一个5px的边框。对。。Border正在增加元素的大小，而float属性将在图像上起作用。@MarioBoss是正确的。尝试添加边框：5px实心透明；对于img风格，我们应该有更多的想法。。如果您不能在项目中使用Flex或GRID，因为您需要支持旧浏览器，请考虑使用CSS属性：“父元素的显示：表”和“子元素的显示：表单元格”