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

     效果如下:

  • 相关阅读:
    仅当使用了列的列表并且 IDENTITY_INSERT 为 ON 时,才能为表'SpeType'中的标识列指定显式值
    SQL Server 创建作业系列问题
    常用WebService收集
    SQL Server中调用WebService的实例
    本地时间与格林威治时间相互转换
    $route和$router的区别?
    超详细的Canal入门,看这篇就够了!
    linux 安装redis 完整步骤
    什么是JSON
    The expression 'list' evaluated to a null value
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7043375.html
Copyright © 2011-2022 走看看