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

丸子很可爱

已于 2024-04-18 10:17:16 修改

阅读量1.4k

点赞数 5

分类专栏： html 前端，vue 文章标签：布局 html css

于 2019-03-15 17:42:35 首次发布

本文链接：https://blog.csdn.net/k_happy/article/details/88579601

版权

项目中遇到栅格系统布局问题，当元素悬浮后出现30px下载按钮，导致高度不固定的列排列错乱。解决方法是移除el-col的浮动样式，设置display为inline-block和vertical-align为top，确保元素顶部对齐，从而避免布局混乱。

摘要由CSDN通过智能技术生成

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