推送div过去的页面边缘

Question

我正在建立一个网站的标题，其中包括来自不同城市的天际线。为了方便地更改显示的城市，我为每个城市设计了一个唯一的div，我可以直接放在标题中。我为每个div设置背景图像，然后一个接一个地定位它们，如下所示。

<header>
  <div class='skyline'>
    <div id='la'></div>
    <div id='seattle'></div>
    <div id='paris'></div>
    <div id='chicago'></div>
    <div id='london'></div>
  </div>
</header>

我遇到的问题是，最后一个会从页面中删除，在右边留下一个空白。我想让它们流过屏幕的边缘，这样用户只会看到适合他们窗口宽度的东西。我的css看起来像这样：

.skyline {
  background: #fff;
  background-position: 0px 0px;
  overflow: hidden;
  height: 113px;
  width: 100%;
}
.skyline div {
  display: inline-block;
  height: 113px;
  float: left;
  overflow: visible;
}
.skyline #la {
  width: 320px;
  background-image: url('/img/skyline/la.png');
}

所有其他div都有相同的css，只是源图像和宽度不同。

我把这个(修改过的)放在jsfiddle上，以演示我得到的行为。只需调整窗口大小即可演示正在发生的事情。

我能做些什么来解决这个问题呢？我对修改html结构持开放态度，但如果可以保持不变，我将不胜感激。

Answer 1

您必须将包含元素设置为overflow: hidden;，以使其不显示水平滚动条，并且必须为那些浮动的div指定容器的总宽度，以便它们一直向右移动。否则他们就会被推下去。你可以使用绝对位置来解决这个问题，但我认为这个解决方案更简单。

像这样的http://jsfiddle.net/xLwML/17/

Answer 2

尝尝这个

.skyline {
  background: #fff;
  background-position: 0px 0px;
  height: 113px;
  width: 1000px; /* Changed from 100% & removed overflow */
}