Css 在IE7中水平对齐div，无垂直堆叠

我有一个固定的容器，里面是一个额外的容器，根据用户的选择，它包含了许多div。我需要这些额外的div来水平排列并提供水平滚动（但不是垂直滚动）。
例如：
[x] [x][x]

基本上，我的设置如下所示：

<div id="container">
    <div id="second">
      <div class="final"><img src="..." /></div> //Repeat as needed from user
    </div>
</div>

这种设置在Firefox中运行良好，但在IE7中继续出现故障。所有“#final”div垂直堆叠：
[x]
[x]
[x]

有没有关于如何解决这个问题的建议？

试试这个

<div id="container">
    <div id="second">
      <div class="final"><img src="..." /></div>
      <div class="final"><img src="..." /></div>
      <div class="final"><img src="..." /></div>
      <div class="final"><img src="..." /></div>
    </div>
</div>
<style>
#container {
  position: fixed;
  top: 200px;
  left: 0px;
  height: 500px;
  width: 100%;
}
#second {
  height: 500px;
}
.final {
  float: left;
}

#容器{
位置：固定；
顶部：200px；
左：0px；
高度：500px；
宽度：100%；
}
#第二{
高度：500px；
}
.决赛{
浮动：左；
}

这里有几个问题。首先：

<div id="container">
    <div id="second">
       <div class="final"><img src="..." /></div> //Repeat as needed from user
       <div style="clear:both"></div>
    </div>
</div>

那就够了

---

编辑：至少可以修复HTML/CSS错误。但我刚刚注意到，您希望文档向右滚动。唯一的方法是将#container div的宽度设置为大于.final div的所有宽度之和。否则，您的浏览器将尝试“向下”推送所有内容。

从您目前提供的内容来看，我没有料到会像您在FX中希望的那样工作。我认为您需要进行#最终显示：inline块；对不起，我刚开始忘了一些重要的信息。Final显示为inline-block。忘记显示：inline-block，您不需要它和一个float。无法使用您描述的方法强制浏览器水平滚动。每次添加新的div时，#container div必须自动将其宽度更改为大于.final div之和。Javascript是必需的。Oops。我打字。Final是一个类，不是id。我将编辑原始帖子。尝试使用display:inline作为id“second”不好。仍然得到基本相同的效果。这是一个有点复杂的设置，下面是这些项目的完整CSS。您可能想阅读本文。清楚：当这两个元素仅用于样式时，作为语义元素，它们都是松散的。使用CSS将其作为：after元素应用，或使用该设置在“second”上定义clear:tweet。我现在有两列项目，但下面仍有所有项目。@Mike，我猜这是因为它触及了浏览器窗口的宽度。如果你想强迫它从屏幕右侧滚动，那么你需要一些javascript。我理解这一点。这就是我想做的。我有一个jQuery脚本，它将这个元素（如果它水平溢出）视为幻灯片类型的对象。用于滚动的脚本工作正常，但IE7中的格式设置不起作用。我已经在IE7中使用了上述代码，只要它没有到达浏览器边缘。你一定打错了什么。

.final {
  float: left;
}