首页 > 代码库 > 小程序一个大盒子里面的盒子内容居中对其显示wxss写法
小程序一个大盒子里面的盒子内容居中对其显示wxss写法
对小程序研究感兴趣的可加(交流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>1</text> <text>初三</text> </view> <view class="days01"> <text>2</text> <text>初八</text> </view> <view class="days01"> <text>3</text> <text>初九</text> </view> <view class="days01"> <text>4</text> <text>初十</text> </view> <view class="days01"> <text>5</text> <text>十一</text> </view> <view class="days01"> <text>6</text> <text>十二</text> </view> <view class="days01"> <text>7</text> <text>十三</text> </view> <view class="days01"> <text>8</text> <text>初七</text> </view> </view> </view>
WXSS:
.maxbox{ width: 90%; height: auto; margin-left: 5%; display: flex; flex-direction: column; border: 1px #000 solid; } /*星期*/ .weekday{ width: 100%; height: 100rpx; line-height: 100rpx; background-color: #188eee; display: flex; flex-direction: row; color: #fff; } .weekday01{ width: 14.2%; height: 100%; text-align: center; } /*阳历阴历*/ .days{ width: 100%; 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写法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。