当前位置:网站首页>微信小程序03-文字一左一右显示,行内块元素居中
微信小程序03-文字一左一右显示,行内块元素居中
2022-07-01 15:09:00 【蹦跶哒的王小哲】
效果展示
实现程
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;
}
边栏推荐
- 适合没口才的人做,加入中视频伙伴计划收益是真香,一个视频拿3份收益
- What are the EN ISO 20957 certification standards for common fitness equipment
- Redis安装及Ubuntu 14.04下搭建ssdb主从环境
- Task. Run(), Task. Factory. Analysis of behavior inconsistency between startnew() and new task()
- After twists and turns, I finally found the method of SRC vulnerability mining [recommended collection]
- 《QT+PCL第六章》点云配准icp系列4
- Opencv Learning Notes 6 -- image feature [harris+sift]+ feature matching
- MySQL审计插件介绍
- DirectX修复工具V4.1公测![通俗易懂]
- 竣达技术丨室内空气环境监测终端 pm2.5、温湿度TVOC等多参数监测
猜你喜欢
智能运维实战:银行业务流程及单笔交易追踪
Introduction to MySQL audit plug-in
定了!2022海南二级造价工程师考试时间确定!报名通道已开启!
MySQL审计插件介绍
opencv学习笔记四--银行卡号识别
It's settled! 2022 Hainan secondary cost engineer examination time is determined! The registration channel has been opened!
opencv学习笔记五--文件扫描+OCR文字识别
首届技术播客月开播在即
Junda technology - wechat cloud monitoring scheme for multiple precision air conditioners
idea中新建的XML文件变成普通文件的解决方法.
随机推荐
榨汁机UL982测试项目有哪些
opencv学习笔记六--图像拼接
Tableapi & SQL and MySQL data query of Flink
Intelligent operation and maintenance practice: banking business process and single transaction tracking
Junda technology indoor air environment monitoring terminal PM2.5, temperature and humidity TVOC and other multi parameter monitoring
【LeetCode】16、最接近的三数之和
这3款在线PS工具,得试试
《QT+PCL第六章》点云配准icp系列2
TypeScript:var
Mongodb second call -- implementation of mongodb high availability cluster
These three online PS tools should be tried
常见健身器材EN ISO 20957认证标准有哪些
Written on the first day after Doris graduated
Opencv learning notes 5 -- document scanning +ocr character recognition
Storage form of in-depth analysis data in memory
音乐播放器开发实例(可毕设)
What are the EN ISO 20957 certification standards for common fitness equipment
Opencv Learning Notes 6 -- image mosaic
【锁】Redis锁 处理并发 原子性
Solidty智能合约开发-简易入门