column-count: 2; 数字为2,代表一行显示几个
break-inside: avoid; 去空白,避免换行
<view class="content">
<view class="list" v-for="(value,index) in 5" :key='index'>
<image mode="widthFix" src="static/1.png"></image>
<view class="title">我是标题</view>
<view class="con">我是内容</view>
</view>
</view>
.content{
padding: 30rpx;
box-sizing: border-box;
column-count: 2;
.list {
break-inside: avoid;
width: 330rpx;
border: 1px solid #f4f4f4;
image {
width: 100%;
border-radius: 6rpx;
}
.title {
margin-left: 15rpx;
margin-right: 15rpx;
font-size: 30rpx;
}
.con{
margin: 15rpx;
margin-top: 20rpx;
display: flex;
font-size: 26rpx;
align-items: center;
justify-content: space-between;
}
}
}