最近项目中,要实现栅格系统布局,并且高度不固定,鼠标悬浮后多出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=