css 宫格样式内容上下结构
结构
<div class="sc-content-group"><div class="sc-content-item"><div class="sc-item-img"><el-image :src="src" :preview-src-list="[src]"></el-image></div><div class="sc-item-check"><el-checkbox v-model="checked">存在缺陷</el-checkbox></div></div><div class="sc-content-item"><div class="sc-item-img"><el-image :src="src" :preview-src-list="[src]"></el-image></div><div class="sc-item-check"><el-checkbox v-model="checked">存在缺陷</el-checkbox></div></div>
</div>
样式
.sc-content-group {display: flex;flex-wrap: wrap; //一行超出 换行}.sc-content-item {padding: 5px;display: flex;flex-direction: column; //内容上下}.sc-item-img{height: 90px;width: 120px;}.sc-item-check{padding-left: 15px;}