simple style for images in a row with the same image

by heriberto perez

HTML

<div class="main">
  <div class="posts">
   <ul class="list-posts">
    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/600/300" alt="" />
     </div><!-- /.post-image -->    
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/400/300" alt="" />
     </div><!-- /.post-image -->     
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/400/400" alt="" />
     </div><!-- /.post-image -->     
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/600/600" alt="" />
     </div><!-- /.post-image -->    
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/200/300" alt="" />
     </div><!-- /.post-image -->    
    </li>

    <li>
     <div class="post-image">
      <img src="http://placekitten.com/g/200/300" alt="" />
     </div><!-- /.post-image -->    
    </li>

   </ul><!-- /.list-posts -->
  </div><!-- /.posts -->
 </div><!-- /.main -->

CSS

.list-posts li {
  float: left;
  margin: 0px .33% .33% .33%;
  list-style-type: none;
  width: 16%;
}

.post-image img { width: 100%; height: auto; }