今天想布個頁面， 許久不手寫css了，從前寫了許多html5的遊戲活動等， 大轉盤，豆豆世界，沃積分， 刮刮卡， 那時候早，不同手機端一個個測，手機品牌每個瀏覽器都不一樣，那時候測試部的可是好好弄了我寫的積分平臺的聯通全棧移動端了， 搞了通宵才讓回家，因爲要趕上線。
如今卻css許久不寫了，好多技能都忘了，
記得一些實用技巧就是，絕對定位這些，還有就是inline-block,這個在對齊一排的時候特別重要， 還有就是line-height,在文字處理的時候非常重要，
今天隨手佈一個ｃａｒｄ 櫥窗的佈局， 就是
ｃｏｎｔａｉｎｅｒ 設置爲１００％， 而裏面多個ｃａｒｄ， ｍａｒｇｉｎ這個弄好後，想讓它橫向, text-align:center, display:inline-block.
如果最後元素沒有填滿， 就創建空的card填滿一行，使所有card從左到右排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 100%; min-height: 150px; text-align: center; } .card { display: inline-block; background-color: red; width: 20%; height: 50px; margin: 10px 10px; } .empty{ background-color: white; } </style> </head> <body> hello world <div class="container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div>
(.card>{$})*5
<div class="card empty"></div> <div class="card empty"></div> </div> </body> </html>
結果： 內容居中，最後一行從左到右排列，如下
flex佈局的方式：
最後依然記得補充ｃａｒｄ佔位，使最後一行從左到右排列顯示, container居中， 設置寬度後, 添加margin: 0 auto;就可以了。