最终我们需要的效果是:

它的布局结构式这样的:

代码实现说明：

完整代码:

     
      
      
       *{margin: 0;padding: 0;box-sizing: border-box;}.container{width: calc(450px + 17px);height: 400px;background-color: greenyellow;overflow: auto;}.container .inner-container{overflow: hidden;width: 450px;background-color: #ccc;padding: 10px;padding-bottom: 0px;}.container .inner-container>div{width: 100px;height: 100px;background-color:#D43F3A;float: left;margin-right: 10px;margin-bottom: 10px;}.container .inner-container>div:nth-child(4n){margin-right: 0;}
       
        
         
          1
         
         
          2
         
         
          3
         
         
          4
         
         
          5
         
         
          6
         
         
          7
         
         
          8
         
         
          9
         
         
          10
         
         
          11
         
         
          12
         
         
          13
         
         
          14
         
         
          15
         
         
          16
         
         
          17
         
        
       
      
     

另一种效果:

它的布局结果是:

代码:

完整代码:

     
      
      
       
       
        *{margin: 0;padding: 0;box-sizing: border-box;}.container{width: 490px;height: 400px;background-color: #ccc;overflow: auto;overflow-x: hidden;}.container .inner-container{width: 490px;padding: 10px 30px;}.container .inner-container>div{width: 100px;height: 100px;background-color:#D43F3A;float: left;margin-right: 10px;margin-bottom: 10px;}.container .inner-container>div:nth-child(4n){margin-right: 0;}
        
         
          
           1
          
          
           2
          
          
           3
          
          
           4
          
          
           5
          
          
           6
          
          
           7
          
          
           8
          
          
           9
          
          
           10
          
          
           11
          
          
           12
          
          
           13
          
          
           14
          
          
           15
          
          
           16
          
          
           17
          
         
        
       
      
     

总结:

1 通过加一个中间层来处理出现的滚动条的影响

2 chrome下的滚动条的宽度是17px