关于每行N列的这种布局，存在一个两端对齐的问题，因为每一列都会存在一个margin-left或者margin-right，导致最后一个超出父元素的边界。
通过一番努力，终于解决了这个遗留很久的问题，废话不多说，先看做完之后的效果图
2.PNG
先给出dom结构
一、解决思路
1.PNG
1.假定每行4列，则每一列宽度应该为25%，包括border和margin-right，此时4列加起来的宽度应该正好是100%，即父元素的宽度
2.按照第一步的逻辑，每一行最后一列的margin-right会使每一行的右侧和父元素并不是对齐的，看下图。我们暂时不管这个问题，后面会解决。
3.PNG
3.每一列包括自己本身div.item和margin-right，设本身宽度为23%，margin-right为2%，这样加起来刚好25%。
注意：div.item自身有border,会影响百分比计算，将它的box-sizing设置为border-box,会将border的宽度计算在23%的width里面，这样就可以消除影像
4.最后解决第2步中存在的问题，通过给div.item的父元素div.main 设置margin-right:-2%,就可以解决这个问题了。
二、完整CSS代码
.container{
margin:50px 10px;
border-top:1px solid #000;
overflow: hidden;
}
.main{
margin-top:10px;
margin-right:-2%;
}
.item{
width:23%;
height:30px;
line-height: 30px;
text-align: center;
margin-right:2%;
box-sizing:border-box;
float:left;
border:1px solid #cbd1d0;
margin-bottom:10px;
}
最后，大家如果还有其他的解决办法或者思路，欢迎指导。如果文章有问题，也可以在评论中指出来，么么~~~
