列表中，悬浮到某一块之后，因高度不同，导致排列错乱

最近项目中，要实现栅格系统布局，并且高度不固定，鼠标悬浮后多出30px的下载按钮，导致后面排列错乱。

鼠标悬浮之后，后面错乱：

代码：
<el-row>
  <!--视频-->
  <el-col v-for="(item1,index1) in item.mediaList" :key="index1" class="media-col" :xs="24" :sm="12" :md="6" :lg="4">
    <div class="resource-box" v-if="item1.mediaType == 1">
      <!--视频封面-->
      <div class="parents-box">
        <div class="cover-box">
          <img :src="item1.imgSrc" alt="加载失败">

          <!--播放按钮-->
          <span class="play-btn-icon" v-show="isShowPlayBtn" @click="playVideoBtn(item1,index1)"></span>
        </div>
        <!--悬浮显示下载按钮-->
        <div class="down-load-file" @click="downLoadFile(item1,index1)">
          <span></span>
        </div>
      </div>
      <!--底部信息-->
      <div class="video-info">
        <div>
          <span class="file-icon name-icon"></span>
          <span class="txt-overflow file-name" :title="item1.fileName">{{item1.fileName}}</span>
        </div>
        <div>
          <span class="file-icon time-icon"></span>
          <span class="txt-overflow word-style file-time" :title="item1.fileTime">{{item1.fileTime}}</span>
          <span class="txt-overflow word-style file-size" :title="item1.fileSize">{{item1.fileSize}}</span>
        </div>
      </div>
    </div>
   
  </el-col>

</el-row>

这是因为在布局中使用el-col标签布局，el-row自带浮动样式（float:left）,

需要去掉浮动，具体样式如下：

el-col{

  float:none;

  display: inline-block;  // 一行排多个

   vertical-align: top; //因高度不一致，靠顶部对齐

}

结果：