效果展示
实现程
WXML 文件:
<view class="doctor">
<view class="doctor-tit">
<view class="left-tit">医生推荐</view>
<view class="right-tit">查看更多></view>
</view>
<view class="doctor-list">
<view class="list">
<image class="doctor-pic" src="../../images/center.png"></image>
<view class="doctor-name">赵医师</view>
</view>
<view class="list">
<image class="doctor-pic" src="../../images/center.png"></image>
<view class="doctor-name">陈医师</view>
</view>
<view class="list">
<image class="doctor-pic" src="../../images/center.png"></image>
<view class="doctor-name">刘医师</view>
</view>
</view>
</view>
WXSS样式:
01 文字左右显示
display: flex;
justify-content: space-between;
02 盒子居中显示
display : flex;
justify-content : space-around;
/* 医生推荐 */
.doctor-tit {
height: 20px;
padding: 15px;
display: flex;
justify-content: space-between;
}
.left-tit {
font-size: 14pt;
text-align: justify;
}
.right-tit {
margin-top: 5px;
font-size: 10pt;
color: #b2b2b2;
}
.doctor-list {
display : flex;
width: 100%;
background-color: #fff;
justify-content : space-around;
}
.list {
width: 30%;
height: 150px;
border: 1px solid red;
text-align: center;
}
.list .doctor-pic {
width: 100%;
height: 120px;
}
.list .doctor-name {
font-size: 12pt;
}