【微信小程序】03-文字一左一右显示,行内块元素居中
2023-09-11 14:19:17 时间
效果展示
实现程
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;
}
相关文章
- 摩拜单车微信小程序开发技术总结
- 微信小程序:手写日历组件
- 微信小程序加密数据(encryptedData)解密中的PHP代码,php7.1报错
- 微信小程序_(表单组件)button组件的使用
- 微信公众号开发系列教程一(调试环境部署)
- 微信禁止分享功能
- 带三方登录(qq,微信,微博)
- 微信小程序如何转换成分与秒
- uni-app:微信小程序中用户登录(hbuilderx 3.6.18)
- uni-app:运行到微信小程序模拟器(hbuilderx 3.6.18)
- 微信小程序----相对路径图片不显示
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
- 微信小程序----连等报错(ReferenceError: xxxxx is not defined)
- 微信小程序----实现YDUI的ScrollNav组件(滚动导航)
- 微信小程序----实现YDUI的ScrollTab(滚动选项卡)
- 微信小程序----模板(template)
- 微信小程序----App生命周期
- C4C微信集成 - agent在C4C系统回复,微信用户在微信端直接收到
- Atitit 微信小程序的部署流程文档 目录 1.1. 设置https 参照 Atitit tomcat linux 常用命令1 1.2. 增加证书 腾讯云和阿里云都可申请免费证书,但要一天
- Java Web项目,Android和微信小程序的初始页面配置
- html、vue、uni-app微信小程序的区别
- 个人微信小程序可以使用微信支付的解决方法
- 微信小程序页面生命周期(整理)
- 微信小程序(原生)——复制、剪贴板功能