微信小程序商城15天从零实战视频课程-知识点-1行2列(左图片右多行文字)的布局
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天从零实战视频课程
https://edu.****.net/course/detail/19437