我正在尝试使用第 n 项使用框来实现流畅的无缝响应式布局。
我想要实现的确切布局是这个http://dribbble.com/
我遇到的问题是使盒子浮动在一起,最后一个盒子没有右边距。重新调整浏览器大小时需要保留框的浮动。
请在这里看我的小提琴。如果您能提供帮助,将不胜感激。
.box {
position: relative;
background: red;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
width: 21.3%;
height: 200px;
float: left;
padding: 10px;
margin-right:20px;
;
margin-bottom:20px;
}
.box:nth-of-type(4n) {
margin-right:0
}
@media screen and (max-width: 1002px) {
.box:nth-of-type(4n) {
margin-right:0
}