微信小程序商城15天从零实战视频课程-知识点-1行2列（左图片右多行文字）的布局

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhuaweb

wxml代码

<!--1行2列：左图片，右文字（多行文字）-->
  <view class='line'>
    <image class="toutiao-img" src='/img/cp01.jpg' />
    <view class='two-line-text'>
      <text class='text-center txt1'>杭州美耀湾小区门禁系统</text>
      <text class="text-center txt2">工程时间：2017年3-5月份</text>
      <text class="text-center txt2">覆盖小区的东门和南门</text>
    </view>
  </view>

wxss代码

/* 1行2列：左图片，右文字（多行文字） */

.line{
    display: flex;
    margin: 1rpx;
    border: #ddd solid 1px;
    padding: 10rpx;
}

.toutiao-img{
    width: 80px;
    height: 80px;
}
.two-line-text{
    padding: 3px;
    display: flex;
    flex-direction: column;
}
.text-center{
    margin: 0 auto;
}

.txt1{
    margin: 3px 3px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; color:  #09bb07;
}
.txt2{
    margin: 3px 3px;
    font-size: 13px;
     color: #656565;
    white-space: nowrap;
}
.txt3{
    margin: 3px 3px;
    font-size: 13px;
    color: #656565;
    white-space: nowrap;
}

欢迎你们收看个人视频教程：微信小程序商城15天从零实战视频课程
小程序