h5頁面彈性佈局,固容器定高度,內部元件不固定高度
阿新 • • 發佈:2020-11-12
<!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>