列表中，懸浮到某一塊之後，因高度不同，導致排列錯亂

最近項目中，要實現柵格系統佈局，並且高度不固定，鼠標懸浮後多出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; //因高度不一致，靠頂部對齊

}

結果：