HTML 布局 : Continuous images

Question

我有一系列图片，我想让它们连续显示，即

[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]

我希望 overflow hidden 部分。

我当前的 HTML 如下:

<div id="gallery">
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
  <img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
</div>

这是CSS:

#gallery {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
#gallery .gallery_img {
  width: auto;
  height: 200px;
}

这是 jsFiddle .我想在屏幕边缘显示一半图像，如下所示:

但是，我只能设法只显示完整图像。我应该如何修改 HTML/CSS 代码？

Answer 1

只需使用百分比形式的超宽和一个 mask div:

DEMO

#gallery {  
  width: 200%; /* this is the trick */
}
#gallery img {   /* and no need to add class="gallery_img" to IMGs anymore */
  height: 200px;
}

#wrapper {  
  height: 200px;
  overflow: hidden;
}



<div id="wrapper">
  <div id="gallery">
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />    
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />    
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
    <img src="http://www.o2h.com.hk/images/apple_gala.JPG" />        
  </div>
</div>

---

编辑

我也会添加最简单的解决方案(由@RupaliShinde 发布)，因为它显示了 white-space 属性的正确使用，而且看起来很难重现(阅读评论) :

#gallery {  
  width: 100%; 
  overflow: hidden;  
  white-space: nowrap; /* this is the trick */
}
#gallery img {  
  height: 200px;
}

DEMO