2

我正在为一个包含来自各个城市的天际线的网站构建一个标题。为了方便更改显示的城市，我为每个城市设计了一个独特的 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 结构，但如果可以保持不变，我将不胜感激。

4

2 回答 2

1

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

像这样 h ttp://jsfiddle.net/xLwML/17/

于 2012-08-26T20:21:20.190 回答
1

尝试这个

.skyline {
  background: #fff;
  background-position: 0px 0px;
  height: 113px;
  width: 1000px; /* Changed from 100% & removed overflow */
}
于 2012-08-26T19:14:53.227 回答