关于每行N列的这种布局，存在一个两端对齐的问题，因为每一列都会存在一个margin-left或者margin-right，导致最后一个超出父元素的边界。
通过一番努力，终于解决了这个遗留很久的问题，废话不多说，先看做完之后的效果图
2.PNG
先给出dom结构
<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">时尚</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>
</div>
</body>
一、解决思路
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代码
<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>
最后，大家如果还有其他的解决办法或者思路，欢迎指导。如果文章有问题，也可以在评论中指出来，么么~~~
网友评论