效果图： css: 最关键的 column-count: 2; 数字为2，代表一行显示几个; break-inside: avoid; 去空白，避免换行 这里图片给个默认宽度，高度自适应 结构：最外层命名content
.content{ padding: 30rpx; box-sizing: border-box; column-count: 2; border: 1px solid red; .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; } } }
<image mode="widthFix" src="/static/1.png"></image>
<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"> <text>我是内容</text> </view> </view> </view>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
699