更改浏览器大小时，图库会在右侧留下较大的间隙

Question

我正在创建一个300x200图像的图库。画廊由

组成

<div id="gallery" >

    <a href="gallery/1.jpg">
        <img src="resized_gallery/gallery001.jpg" />
    </a>
    <a href="gallery/1.jpg">
        <img src="resized_gallery/gallery002.jpg" />
    </a>

等

问题是当缩小浏览器窗口时，它会在右侧留下巨大的空白区域。

如何停止发生空白？理想情况下，我希望在调整到较小的列之前，图片稍微偏离窗口。

JSFiddle：http://jsfiddle.net/REfjm/7/

Answer 1

解决方案1： 您可以将整个事物放在中间位置，以便在text-align:center;

内添加#gallery时调整大小时不会显得难看

JSFIDDLE DEMO

解决方案2： 当图像被剪切成两列时，您可以增加图像的最大宽度 - ＆gt;让我们假设您的图像被剪切成宽度为两列的列：950px

  //this one for changing when it gets converted to two column
    @media  screen and (max-width: 950px) {
           #gallery img{
            max-width:400px; // you can change this according to your needs so that there is only litl white space 
          }
        }
  //this one for changing when it gets converted to one column (we consider 850 to be the width when it gets converted from two column to 1 column)
    @media  screen and (max-width: 850px) {
       #gallery img{
        max-width:600px; 
      }
  }

DEMO FOR THIS

Answer 2

如果我希望图像在放到下一行之前略微渗出，我就会这样做。修改味道。即成。

body {
    overflow-x: hidden;
}
#gallery {
    width: 120%;
}

http://jsfiddle.net/REfjm/12/