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

丸子很可爱

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

阅读量1.5k

点赞数 5

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/k_happy/article/details/88579601

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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