今天想布个页面, 许久不手写css了,从前写了许多html5的游戏活动等, 大转盘,豆豆世界,沃积分, 刮刮卡, 那时候早,不同手机端一个个测,手机品牌每个浏览器都不一样,那时候测试部的可是好好弄了我写的积分平台的联通全栈移动端了, 搞了通宵才让回家,因为要赶上线。
如今却css许久不写了,好多技能都忘了,
记得一些实用技巧就是,绝对定位这些,还有就是inline-block,这个在对齐一排的时候特别重要, 还有就是line-height,在文字处理的时候非常重要,
今天随手布一个card 橱窗的布局, 就是
container 设置为100%, 而里面多个card, margin这个弄好后,想让它横向, 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> <div class="card empty"></div> <div class="card empty"></div> </div> </body> </html>
结果: 内容居中,最后一行从左到右排列,如下