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

试试这个

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

Answer 2

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

喜欢这个h ttp://jsfiddle.net/xLwML/17/

推送div过去的页面边缘

2 个答案: