设置div的宽度为父元素的百分比，高度为宽度的百分比

        body {
            margin: 0 auto;
            width: 100%;
            /*清除display:inline-block元素换行符间隙*/
            font-size: 0;
            text-align: center;
        }
        div {
            display: inline-block;
            width: 20%;
            background: green;
            font-size: 12px;
            position: relative;
            vertical-align: middle;
        }
        div:before {
            content:"";
            display: inline-block;
            /*设置div的高度*/
            padding-bottom: 100%;
            width: .1px;
            vertical-align: middle;
        }
        div:nth-child(2n){
             background: orange;
         }
        div:nth-child(3n){
            margin-right: 0;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 4em;
            color: #fff;
        }