title: HTML Layout : Continuous images
body: <p>I have a series of images, which I want to make them showing in a row, i.e.</p>
  
  <blockquote>
    <p>[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]</p>
  </blockquote>
  
  <p>I want the overflow part will be hidden.</p>
  
  <p>My current HTML is as follow:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
    &lt;img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" /&gt;
    &lt;img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" /&gt;
    &lt;img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" /&gt;
    &lt;img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" /&gt;
    &lt;img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" /&gt;
    &lt;img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" /&gt;
    &lt;img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" /&gt;
    &lt;img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" /&gt;
    &lt;img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the CSS:</p>
  
  <pre><code>#gallery {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  #gallery .gallery_img {
    width: auto;
    height: 200px;
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/shivanraptor/HP3h8/" rel="nofollow noreferrer">jsFiddle</a>. I would like to show half image in the edge of the screen, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/T0ARt.png" alt="enter image description here"></p>
  
  <p>However, I can only manage to show full images only. How should I modify the HTML / CSS codes ?</p>