如何使用css nth Term创建流体箱浮动响应

时间:2013-10-27 19:45:25

标签: css css3 css-float fluid-layout

我正在尝试使用第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

     }

0 个答案:

没有答案