响应式4列图像网格投资组合

Question

我想只使用html，css和js制作投资组合。列的数量应该是4，并且在调整大小时应该是有响应的。我发现这个代码是完美的，但问题是它包含多于4列 - http://codepen.io/bradfrost/pen/xkcBn。

有没有一种方法，使之成为仅有4 columns..thanks

这里的CSS

.g { 
     padding: 0.25em; 
      overflow: hidden; 
     } 
     .g li { 
      float: left; 
      width: 50%; 
      padding: 0.25em; 
     } 
     .g img { 
      display: block; 
     } 
     .g li:nth-child(odd) { 
      clear: left; 
     } 

     @media screen and (min-width: 40em) { 
      .g li { 
       width: 33.3333333333333333%; 
      } 
      .g li:nth-child(3n+1) { 
       clear: left; 
      } 
      .g li:nth-child(odd) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 55em) { 
      .g li { 
       width: 25%; 
      } 
      .g li:nth-child(4n+1) { 
       clear: left; 
      } 
      .g li:nth-child(3n+1) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 72em) { 
      .g li { 
       width: 20%; 
      } 
      .g li:nth-child(5n+1) { 
       clear: left; 
      } 
      .g li:nth-child(4n+1) { 
       clear: none; 
      } 
     } 
     @media screen and (min-width: 90em) { 
      .g li { 
       width: 16.666666666%; 
      } 
      .g li:nth-child(6n+1) { 
       clear: left; 
      } 
      .g li:nth-child(5n+1) { 
       clear: none; 
      } 
     } 

Answer 1

这是我懒的回答你的懒惰。 http://jsfiddle.net/z38g0Le5/

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 

<style> 
    .box {width:25%; display:inline-block;} 
</style> 

严重有那么多的资源在那里......