从前做前端的时候， 联通的好多html5活动， 页面布局如何整齐，回顾一个常用的
今天想布个页面， 许久不手写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;就可以了。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
2014-12-29 我在一个前端项目中用js整理的一些通用方法，其中使用到的思想，主要就是约定了。