通过ul li遍历出来的图片,高度不一致,导致图片错位的解决方案
编号为1的容器,高度大于其他三个容器,导致3、4错位
vue
<div class="content" >
<ul>
<li v-for="item of list" :key="item.id" >
<img class="img-content" :src="item.imageUrl" />
</li>
</ul>
</div>
<style>
// 删除li的左浮动
.content
display:flex
//设置背景颜色,遮盖那些不充实的空隙
background:#fff
.li
//float:left
//添加下面两行代码
display: inline-block
vertical-align :top
.icon-img
width:100%
</style>