演示: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 ?
最佳答案
老兄在这里回答:
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%;}
关于javascript - 使用显示表和 float 的响应式网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29816572/