对小程序研究感兴趣的可加(交流QQ群:604788754)入群联系群主可得到小程序教学资源。

这个案例只是想展示效果,内容部分未进行for循环绑定处理:

WXML:

<view class="maxbox">
<!--星期-->
<view class="weekday">
<view class="weekday01">日</view>
<view class="weekday01">一</view>
<view class="weekday01">二</view>
<view class="weekday01">三</view>
<view class="weekday01">四</view>
<view class="weekday01">五</view>
<view class="weekday01">六</view>
</view>
<!---阳历阴历-->
<view class="days">
<view class="days01">
<text></text>
<text>初三</text>
</view> <view class="days01">
<text></text>
<text>初八</text>
</view> <view class="days01">
<text></text>
<text>初九</text>
</view> <view class="days01">
<text></text>
<text>初十</text>
</view> <view class="days01">
<text></text>
<text>十一</text>
</view> <view class="days01">
<text></text>
<text>十二</text>
</view> <view class="days01">
<text></text>
<text>十三</text>
</view> <view class="days01">
<text></text>
<text>初七</text>
</view>
</view> </view>

WXSS:

.maxbox{
width: %;
height: auto;
margin-left: %;
display: flex;
flex-direction: column;
border: 1px # solid;
}
/*星期*/
.weekday{
width: %;
height: 100rpx;
line-height: 100rpx;
background-color: #188eee;
display: flex;
flex-direction: row;
color: #fff; }
.weekday01{
width: 14.2%;
height: %;
text-align: center;
} /*阳历阴历*/
.days{
width: %;
height: auto;
/*display: flex;
flex-direction: row;*/
display: inline-block;
}
.days01{
width: 14.2%;
height: 100rpx;
display: flex;
flex-direction: column;
text-align: center;
font-size: 16px;
float: left;
line-height: 40rpx;
}

效果如下:

小程序一个大盒子里面的盒子内容居中对其显示wxss写法的更多相关文章

  1. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  2. 微信小程序-开心大转盘(圆盘指针)代码分析

    大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图:     界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没 ...

  3. 微信小程序开发详解——小程序,大颠覆!

    微信小程序开发 联系 苏念 188.1414.7927  微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序  ...

  4. C#windows桌面应用小程序制作——大文件数据分段解析存储

    现在的任务就是做一个大文件解析的桌面应用小程序,具体需求就是:将一个很大的文件里的数据按一定标志拆分然后分别保存到某个文件夹下面. 解析的文件内容为以下内容: windows 应用小程序界面 具体代码 ...

  5. 微信小程序,前端大梦想(一)

    小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...

  6. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...

  7. 多个微信小程序一个服务端架构

    由于某些特定的业务场景,当多个小程序需要一个服务端后台提供数据时,大家可能想到是HTTP路由.是的,实际上我们使用微服务的GateWay网关也是一样的,如下图微服务架构: 网关GateWay的作用在于 ...

  8. Lisp小程序,大作用,不该放弃!

    从听说autolisp到现在已经20年了, 学了一点点, 可惜中间没能坚持下来, 放弃了!     今天在画图, 图纸是从revit转成dwg的, 其中有些文本的朝向是错误的, 如果手工旋转很是费事, ...

  9. 微信小程序到底把什么定义为风险内容?

    目录 起因 经过和结果 附录: 起因 之前做一个群相册的小程序,因为涉及到图片和评论等内容的发布分享.因此,微信后台要求有一定的内容安全检测能力. 但是,我用别家的内容检测用的好好的,在国庆前被微信警 ...

随机推荐

  1. docker enable overlay2 quota on Centos 7

    参考文档 docker overlay2的 --storage-opt 需要启动mount 参数中有pquota 参考上边的文档mount中的xfs 含有pquota 将 /etc/fstab 文件中 ...

  2. Unity 新手入门 如何理解协程 IEnumerator yield

    Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分,前半部分是通俗解释一下Unity中的协程,后半部分讲讲C#的IEnumerator迭代器 协程是什么,能干什么? 为了能通 ...

  3. python:循环定义、赋值多个变量

    exec函数,可以循环定义.赋值多个变量 exec ("temp%s=1"%1)   这段代码的意思是,让exec执行temp1=1.字符串里面的%s由‘1’代替了. 我们在外面再 ...

  4. 【读书笔记】使用JMeter创建数据库(Mysql)测试

    读书笔记:<零成本实现Web性能测试>第4章 记得某天按照虫师博客的写的,折腾后成功了.今天又忘记了... 折腾后又成功了,赶紧记录下... 原文:http://www.cnblogs.c ...

  5. webdriver之select、alert、prompt、confirm

    select_by_index()  :通过索引定位select_by_value()  :通过value值定位select_by_visible_text() :通过文本值定位deselect_al ...

  6. WinForm 设置窗体启动位置在活动屏幕右下角

    WinForm 设置窗体启动位置在活动屏幕右下角 在多屏幕环境下, 默认使用鼠标所在的屏幕 1. 设置窗体的 StartPosition 为 FormStartPosition.Manual. 2. ...

  7. zabbix报警逻辑初探

    zabbix报警逻辑初探 首先贴出一张网上找的一张关于zabbix报警相关表结构及表关联逻辑图: actions表 actions表对应前端配置是动作(actions) action由conditio ...

  8. Java利用TCP编程实现简单聊天室

    前言: 本文是我在学习尚学堂JAVA300集第二季网络编程部分仿照视频内容实现而成 具体可以去尚学堂官网观看视频学习 一.实现思路 实现聊天室的最核心部分就是JAVA的TCP网络编程. TCP 传输控 ...

  9. c# 集合去重并筛选

    (from context in retDataList group context by context.ResourceId into g select g.OrderByDescending(b ...

  10. HDU 1560 DNA sequence(DNA序列)

    HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K  ...