關于每行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;

}

最后，大家如果還有其他的解決辦法或者思路，歡迎指導。如果文章有問題，也可以在評論中指出來，么么~~~