
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;
- }