html - HTML 布局：连续图像

Question

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

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

我希望溢出部分将被隐藏。

我当前的 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

看看这个小提琴 - http://jsfiddle.net/jQkHp/

我在画廊周围添加了一个包装 div：

#gallery {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 200px;
  overflow: hidden;
}

#gallery .gallery_img {
  width: auto;
  height: 200px;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

您将需要使用一些 javascript 来设置画廊 div 的宽度以使其正常工作（我现在只是在猜测宽度）。

编辑 - 添加了一些 js 来根据里面的图像计算画廊的宽度http://jsfiddle.net/jQkHp/1/

var galleryWidth = 0;

$('#gallery > img').each(function(){
  galleryWidth += $(this).width();
});

$('#gallery').css('width', galleryWidth);

Answer 2

只需使用百分比的超宽和掩码 div：

演示

#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;
}

演示

Answer 3

只需在 CSS 中添加它

<style>
    #gallery {
  width: 100%;
  height: 200px;
  overflow: hidden;
  white-space: nowrap; 
}
#gallery img {
  width: auto;
  height: 200px;
}
</style>

让其余代码保持原样。

Answer 4

我建议将图像放在包含 div 中的无序列表中，每个图像都在它自己的 LI 中，然后将它们设置为 display: inline-block in the css。

当然，您需要某种方式来滚动图像，为此您可以使用一些 jquery。