今天想布个页面， 许久不手写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;就可以了。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。