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;
    }

     效果如下:

  • 相关阅读:
    ubuntu操作技巧
    电机
    哈佛结构与冯若依曼结构
    linux command ------ ls
    Frames of Reference参考框架
    What Are Tango Poses?Tango姿态是什么?
    Google Tango Java SDK开发:Motion Tracking 运动追踪
    Google Tango Java SDK开发:Configure and Connect 配置和连接
    gradle
    Google Tango service outdated谷歌Tango的服务过时了
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7043375.html
Copyright © 2011-2022 走看看