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