“小程序:弹性布局案例”的版本间的差异
来自CloudWiki
第36行: | 第36行: | ||
<nowiki> | <nowiki> | ||
<view class="post-container"> | <view class="post-container"> | ||
− | <view> | + | <view class="post-author-date"> |
− | <image src=" /images/avatar/3.png"></image> | + | <image class="post-author" src=" /images/avatar/3.png"></image> |
− | <text>Nov 18 2020</text> | + | <text class="post-date">Nov 18 2020</text> |
</view> | </view> | ||
<text>2020LPL夏季赛季后赛观赛指南</text> | <text>2020LPL夏季赛季后赛观赛指南</text> | ||
第62行: | 第62行: | ||
border-bottom: 1px solid#ededed; | border-bottom: 1px solid#ededed; | ||
padding-bottom: 10rpx; | padding-bottom: 10rpx; | ||
− | }</nowiki> | + | } |
+ | .post-author-date{ | ||
+ | /*margin-top : 10rpx;margin-bottom: 20rpx;margin-left: 10rpx;*/ | ||
+ | margin: 10rpx 0 20rpx 10rpx; | ||
+ | } | ||
+ | .post-author{ | ||
+ | width:60rpx;height:60rpx; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | </nowiki> |
2021年4月27日 (二) 14:34的版本
初始代码
<view> <view> <image></image> <text></text> </view> <text></text> <image></image> <text></text> <view></view> </view>
改进代码
<view> <view> <image src=" /images/avatar/3.png"></image> <text>Nov 18 2020</text> </view> <text>2020LPL夏季赛季后赛观赛指南</text> <image src=" /images/lpl.png"></image> <text>8月9号,LPL常规赛收官之战结束,在事关</text> <view> <image src=" /images/icon/chat.png"></image> <text>92</text> <image src=" /images/icon/view.png"></image> <text>102</text> </view> </view>
再改进代码
wxml:
<view class="post-container"> <view class="post-author-date"> <image class="post-author" src=" /images/avatar/3.png"></image> <text class="post-date">Nov 18 2020</text> </view> <text>2020LPL夏季赛季后赛观赛指南</text> <image src=" /images/lpl.png"></image> <text>8月9号,LPL常规赛收官之战结束,在事关</text> <view> <image src=" /images/icon/chat.png"></image> <text></text> <image src=" /images/icon/view.png"></image> <text></text> </view> </view>
wxss:
.post-container{ display: flex; flex-direction: column;margin-top: 20rpx; margin-bottom: 40rpx; background-color:#fff; border-top: 1px solid#ededed; border-bottom: 1px solid#ededed; padding-bottom: 10rpx; } .post-author-date{ /*margin-top : 10rpx;margin-bottom: 20rpx;margin-left: 10rpx;*/ margin: 10rpx 0 20rpx 10rpx; } .post-author{ width:60rpx;height:60rpx; vertical-align: middle; }