【求助】v-for遍历li出现第二行第一个不能顶头显示，然而第三行又可以

Question

问题描述

如图，第二行不能顶头显示，但是第三行可以

问题出现的环境背景及自己尝试过哪些方法

循环从后台获取的课程数据，数据是完整的，但是循环显示出来样式有问题，尝试过全部li写死，第二行样式可以正常显示

相关代码

循环代码

<li v-for="item in data.courses" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    ![](item.cover)
                    <div class="cc-mask">
                      <a :href="'/course/'+item.id" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/course/'+item.id" :title="item.title" class="course-title fsize18 c-333">{{ item.title }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
                      <i class="c-fff fsize12 f-fA">免费</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                      <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
                      |
                      <i class="c-999 f-fA">9634评论</i>
                    </span>
                  </section>
                </div>
              </li>

你期待的结果是什么？实际看到的错误信息又是什么？

页面console无报错

Answer 1

应该是div的高度有超出导致的。样式问题