从前做前端的时候，联通的好多html5活动，页面布局如何整齐，回顾一个常用的-526互联

今天想布个页面，许久不手写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>
        <div class="card empty"></div>
        <div class="card empty"></div>

    </div>

</body>

</html>