關(guān)于每行N列的這種布局梳星，存在一個(gè)兩端對齊的問題帝雇，因?yàn)槊恳涣卸紩嬖谝粋€(gè)margin-left或者margin-right，導(dǎo)致最后一個(gè)超出父元素的邊界度液。
通過一番努力，終于解決了這個(gè)遺留很久的問題画舌，廢話不多說堕担，先看做完之后的效果圖
2.PNG
先給出dom結(jié)構(gòu)
<body>
<div class="container">
<div class="main">
<div class="item">頭條</div>
<div class="item">推薦</div>
<div class="item">視頻</div>
<div class="item">娛樂</div>
<div class="item">體育</div>
<div class="item">高考</div>
<div class="item">汽車</div>
<div class="item">科技</div>
<div class="item">圖片</div>
<div class="item">地方</div>
<div class="item">軍事</div>
<div class="item">社會</div>
<div class="item">NBA</div>
<div class="item">八卦</div>
<div class="item">時(shí)尚</div>
<div class="item">女性</div>
<div class="item">博客</div>
<div class="item">數(shù)碼</div>
<div class="item">教育</div>
<div class="item">星座</div>
<div class="item">游戲</div>
<div class="item">家具</div>
<div class="item">健康</div>
</div>
</div>
</body>
一、解決思路
1.PNG
1.假定每行4列曲聂，則每一列寬度應(yīng)該為25%霹购，包括border和margin-right，此時(shí)4列加起來的寬度應(yīng)該正好是100%句葵，即父元素的寬度
2.按照第一步的邏輯厕鹃，每一行最后一列的margin-right會使每一行的右側(cè)和父元素并不是對齊的兢仰，看下圖乍丈。我們暫時(shí)不管這個(gè)問題，后面會解決把将。
3.PNG
3.每一列包括自己本身div.item和margin-right轻专，設(shè)本身寬度為23%，margin-right為2%察蹲，這樣加起來剛好25%请垛。
注意：div.item自身有border,會影響百分比計(jì)算催训，將它的box-sizing設(shè)置為border-box,會將border的寬度計(jì)算在23%的width里面，這樣就可以消除影像
4.最后解決第2步中存在的問題宗收，通過給div.item的父元素div.main 設(shè)置margin-right:-2%,就可以解決這個(gè)問題了漫拭。
二、完整CSS代碼
<style type="text/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;
}
</style>
最后混稽，大家如果還有其他的解決辦法或者思路采驻，歡迎指導(dǎo)。如果文章有問題匈勋，也可以在評論中指出來礼旅，么么~~~
