html經典佈局(適用於移動端)
阿新 • • 發佈：2019-02-01
主要採用流式佈局flex佈局實現。
在很多時候，移動端頁面一個層常分列，但瀏覽器螢幕差別，用浮動，或者定位寫老是出現一堆或大或小的差錯，此時用流式佈局就可避免這些錯誤。
程式碼：
<head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .box{ width: 300px; padding: 10px; margin: 20px auto; border: 1px soid #000 !important; display: table; background: #ccc; display: flex; } .box .text{ display: table-cell; font-size: 10px; vertical-align: middle; /* flex屬性是以下三個屬性的簡寫 flex-grow:定義彈性盒子項的拉伸因子，即子項分配父項剩餘空間的比，預設值為0 flex-shrink:1;指定了flex元素的收縮規則，子項的收縮所佔的份數，預設值為1 [當所有子項相加的寬度大於父項寬度，每個子項減少的多出的父項寬度的1/n] flex-basis:auto;指定了flex元素在主軸方向上的初始大小，即子項的寬度 */ flex: 0 0 80px; } .box .text .icon,.box .right .icon{ display: inline-block; width: 15px; height: 15px; line-height: 15px; color: red; font-size: 10px; background: #00BFFF; vertical-align: top; } .box .right{ flex:1; /* width:0解決超過省略問題 */ width: 0; background: greenyellow; margin-left: 10px; white-space: nowrap;/* 強制文字在一行內顯示 */ overflow: hidden;/* 溢位內容為隱藏 */ text-overflow: ellipsis;/* 當物件文字溢位時顯示省略標記(...) */ } </style> <body> <div class="warp"> <div class="box"> <span class="text"> <span class="icon">icon</span> 左側——>寬度為80px固定不變 </span> <span class="right"> <span class="icon">icon</span> 右側——>距離左邊10px，為除左側以及邊距的剩餘長度 </span> </div> <div class="box"> <span class="text"> <span class="icon">icon</span> 左側——>寬度為80px固定不變 </span> <span class="right"> <span class="icon">icon</span> 右側——>距離左邊10px，為除左側以及邊距的剩餘長度 </span> </div> </div> </body>
效果圖：
轉載自前端網