html div如何列对其,CSS:自适应N列布局如何解决两端对齐

关于每行N列的这种布局，存在一个两端对齐的问题，因为每一列都会存在一个margin-left或者margin-right，导致最后一个超出父元素的边界。

通过一番努力，终于解决了这个遗留很久的问题，废话不多说，先看做完之后的效果图

2.PNG

先给出dom结构

头条

推荐

视频

娱乐

体育

高考

汽车

科技

图片

地方

军事

社会

NBA

八卦

时尚

女性

博客

数码

教育

星座

游戏

家具

健康

一、解决思路

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;

}

最后，大家如果还有其他的解决办法或者思路，欢迎指导。如果文章有问题，也可以在评论中指出来，么么~~~