css 两边对齐-CSS：自适应N列布局如何解决两端对齐

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

经过一番努力，终于解决了这个困扰我很久的问题。 我们不废话了。 我们先来看看完成后的效果图。

2.PNG

首先给出dom结构

    

        

            
头条
  
            
推荐
 
            
视频
 
            
娱乐
  
            
体育
            
高考
            
汽车
            
科技
            
图片
            
地方
            
军事
            
社会
            
NBA
            
八卦
            
时尚
            
女性
            
博客
            
数码
            
教育
            
星座
 
            
游戏
 
            
家具
 
            
健康
 
        
    

1. 解决方案

1.PNG

1、假设每行有4列，那么每列的长度应该是25%，包括border和margin-right。 此时4列相加的长度应该正好是100%，即父元素的长度

2、按照第一步的逻辑，每行最后一列的margin-right会让每行的边不与父元素对齐css 两边对齐，见右图。 我们暂时不关心这个问题，稍后会解决。

3.PNG

3. 每列都包含自己的 div.item 和 margin-right，将其自己的长度设置为 23%，将 margin-right 设置为 2%，因此正好添加 25%。

注意：div.item本身有边框，会影响比例估计。 将其 box-sizing 设置为 border-box 会估计边框的长度为宽度的 23%，这样就可以将图像移除

4、最后解决第二步的问题，通过给div.item的父元素div.main设置margin-right: -2%，就可以解决这个问题。

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;
    }

最后，如果您还有其他解决方案或者想法，欢迎指导。 如果文章有问题，也可以在评论里指出css 两边对齐，好吧~~~