javascript - 使用显示表和 float 的响应式网格

Question

演示:http://jsfiddle.net/5adjhd1x/2/

如何使下面的拨号盘响应？我尝试在演示 1 中使用宽度 33% 和一些 JS:http://jsfiddle.net/5adjhd1x/ ，但我不能为他们留余地。

.key {
    width:40px;
    height:40px;
    background:red;
    float:left;
    border-radius:50%;
    cursor:pointer;
    text-align: center;
    display:table;
    margin:1%;
}
.key > span {
    display:table-cell;
    vertical-align:middle;
}
.clearFloat {
    clear:both;
}

<div class="keyWrap">
    <div class="key"><span>1</span>

    </div>
    <div class="key"><span>2</span>

    </div>
    <div class="key"><span>3</span>

    </div>
    <div class="clearFloat"></div>
    <div class="key"><span>4</span>

    </div>
    <div class="key"><span>5</span>

    </div>
    <div class="key"><span>6</span>

    </div>
    <div class="clearFloat"></div>
    <div class="key"><span>7</span>

    </div>
    <div class="key"><span>8</span>

    </div>
    <div class="key"><span>9</span>

    </div>
    <div class="clearFloat"></div>
    <div class="key"><span>0</span>

    </div>
    <div class="key dlt"><span>Del</span>

    </div>
</div>
    
    <br>    <br>

我怎样才能让他们在百分比和响应方面有 margin ？

Answer 1

老兄在这里回答:

http://jsfiddle.net/5adjhd1x/6/

给我一​​个赞吧!

.key {overflow: hidden; display: block; background: grey; padding: 0;}
.key li {width: 32%; margin-right: 2%; margin-bottom: 10px; float: left; display: inline-block; background: red;}
.key li:nth-child(3n) {margin-right: 0%;}