<template v-for="(item, index) in (ResearchTrendsta?ResearchTrendsta.slice(0, 6):ResearchTrendsta)" :key="index"> <div class="navcontentitem" @click="deill(item)"> <img :src="item.coverImage"/> <div class="right"> <div class="title">{{item.tilte}}</div> <div class="time">{{item.pulishTime}}</div> </div> </div> </template>
height: 206px; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px; .navcontentitem{ width: 321px; height: 93px; display: flex; cursor: pointer; justify-content: space-between; &:hover{ opacity: 0.7; } img{ width: 142px; height: 93px; } .right{ width: 165px; height: 93px; display: flex; flex-direction: column; justify-content: space-between; .title{ color: #727272; text-align: justify; font-size: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; } .time{ color: #727272; font-size: 12px; } } }
标签:flex,1fr,height,width,93px,列表,display,图片 From: https://www.cnblogs.com/linxiaogang1122/p/18039333