test

博客园 首页 新随笔 联系 订阅 管理
  109 随笔 :: 0 文章 :: 1 评论 :: 16万 阅读
h5页面弹性布局，固容器定高度，内部组件不固定高度 




 


 




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 默认360浏览器为兼容模式 -->
    <meta name="renderer" content=webkit>
    <title>test</title>
    <style>
        .index-content {
            margin-top: 1.5%;
            border-radius: 10px;
            background: #CCC;
        }
 
        .index-day-content {
            height: 83%;
            display: flex;
            flex-wrap: wrap;
            flex-flow: row wrap;
            padding-bottom: 1%;
        }
 
        .index-day-box {
            display: flex;
            flex-direction: column;
            width: 23%;
            background: #F6F5FA;
            border-radius: 10px;
            margin: 1% 1% 0% 1%;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
        }
 
 
        .index-day-box .index-day-text {
            font-size: 1rem;
        }
 
 
 
        .real-time-war-report {
            font-size: 1.9rem;
            letter-spacing: 0px;
            color: #387FF5;
            text-align: center;
            font-weight: bold;
        }
 
    </style>
</head>
 
<body>
 
 
<!-- 日指标 -->
<div style="height: 25%" class="index-content">
 
    <div class="index-day-content">
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
        <div class="index-day-box">
            <div class="real-time-war-report">
                1123213
            </div>
            <div class="index-day-text">
                数据指标
            </div>
        </div>
 
    </div>
</ion-slide>
 
 
</body>
</html>




　　


 







	

	
	

		posted on 
 
testgogogo 
阅读(453) 
评论(0) 
编辑 
收藏 
举报

	











    
    

    
    



    

        
    

        

            
                
                
            
        

    

    

    

    















    

    
    








  

  
点击右上角即可分享

  微信分享提示