小程序 三列布局

效果图： TIM截图20190105170021.png

css

/*@zxyuns 2019-01-05 新增会员优化*/
.brand-btn {
    font-size: 24rpx;
    border: 2rpx solid #dedede;
    border-radius: 6rpx;
    background: #f4f4f4;
    text-align: center;
    display: inline-block;
    min-width: 80rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin-right: 20rpx;
    padding: 0 40rpx;
}
.brand-btn.active {
    color: #006BFF;
    background: #FFFFFF;
    border: 1rpx solid #006BFF;
}
.tl-p-40{
    margin: 40rpx 40rpx 0  40rpx;
}
.tl-content{
    display: flex;
    flex-direction: row;
    justify-content:center;
}
.tl-flex{ /*绝对居钟*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tl-flex2{/*垂直居中*/
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.tl-img-34{
    width: 76rpx;
    height: 76rpx;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.tl-title-14{
    font-size:28rpx;
    font-family:'PingFang-SC-Medium';
    font-weight:600;
    color:#333333;
}
.tl-title-12{
    font-size:24rpx;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:#333333;
}
.tl-title-9{
    font-size:19rpx;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:#333333;
}
.tl-title-11{
    font-size:22rpx;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:#999999;
}
.tl-blue{
    color: #006BFF;
}
.tl-time{
    font-size:24rpx;
    font-family:'PingFang-SC-Medium';
    font-weight:500;
    color:#999999;
    line-height:36rpx;
    margin-top: 20rpx;
    margin-bottom: 43rpx;
}

html

<view class="tl-content">
        <view class="tl-flex"  style="width:76rpx;height:166rpx;align-items: center;margin:0 auto;">
            <image class="tl-img-34" src="https://file.snailpet.cn/63/51/63517d4b8f58172fd70e95131f55ba56.jpg"></image>
        </view>
        <view class="tl-flex2" style="width:430rpx;height:166rpx;margin-left: 24rpx">
            <view class="tl-title-14">比瑞吉狗粮</view>
            <view class="tl-title-9">[余额]</view>
            <view class="tl-title-11">原价:￥78 <text class="tl-title-11">会员价:￥80</text></view>
        </view>
        <view class="tl-flex2" style="flex:1;height:166rpx;">
            <view class="tl-title-12">总优惠:￥888</view>
        </view>
    </view>
    <view class="tl-content">
        <view class="tl-flex"  style="width:76rpx;height:166rpx;align-items: center;margin:0 auto;">
            <image class="tl-img-34" src="https://file.snailpet.cn/63/51/63517d4b8f58172fd70e95131f55ba56.jpg"></image>
        </view>
        <view class="tl-flex2" style="width:430rpx;height:166rpx;margin-left: 24rpx">
            <view class="tl-title-14">比瑞吉狗粮</view>
            <view class="tl-title-9">[余额]</view>
            <view class="tl-title-11">原价:￥78 <text class="tl-title-11">会员价:￥80</text></view>
        </view>
        <view class="tl-flex2" style="flex:1;height:166rpx;">
            <view class="tl-title-12">总优惠:￥888</view>
        </view>
    </view>