css - 如何使用 css nth Term 响应式创建流体盒浮动

Question

我正在尝试使用第 n 项使用框来实现流畅的无缝响应式布局。

我想要实现的确切布局是这个http://dribbble.com/

我遇到的问题是使盒子浮动在一起，最后一个盒子没有右边距。重新调整浏览器大小时需要保留框的浮动。

请在这里看我的小提琴。如果您能提供帮助，将不胜感激。

http://jsfiddle.net/gvGCU/

 .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

     }