zoukankan      html  css  js  c++  java
  • 小程序一个大盒子里面的盒子内容居中对其显示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{
       90%;
      height: auto;
      margin-left: 5%;
      display: flex;
      flex-direction: column;
      border: 1px #000 solid;
    }
    /*星期*/
    .weekday{
       100%;
      height: 100rpx;
      line-height: 100rpx;
      background-color: #188eee;
      display: flex;
      flex-direction: row;
      color: #fff;
    
    }
    .weekday01{
       14.2%;
      height: 100%;
      text-align: center;
    }
    
    /*阳历阴历*/
    .days{
       100%;
      height: auto;
      /*display: flex;
      flex-direction: row;*/
      display: inline-block;
    }
    .days01{
       14.2%;
      height: 100rpx;
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 16px;
      float: left;
      line-height: 40rpx;
    }

     效果如下:

  • 相关阅读:
    GCD 使用说明
    iOS操作系统的层次结构
    Objective-C 类型转换
    UIView和Masonry实现动画效果
    iOS 常用手势
    SDUT 2610 Boring Counting(离散化+主席树区间内的区间求和)
    HDU 4417 Super Mario(主席树求区间内的区间查询+离散化)
    NBUT 1525 Cow Xor(01字典树+前缀思想)
    HDU 4825 Xor Sum(经典01字典树+贪心)
    HDU 1069 Monkey and Banana(二维偏序LIS的应用)
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7043375.html
Copyright © 2011-2022 走看看