在IE7中水平对齐div，没有垂直堆叠

Question

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

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

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

CSS 分解如下：

#container {
  position: fixed;
  top: 200px;
  left: 0px;
  height: 500px;
  width: 100%;
}
#second {
  height: 500px;
}
#final {
  display: inline-block;
  float: left;
}

此设置在Firefox中工作正常，但在IE7中继续中断。所有"#final"div 都是垂直堆叠的：
[x]
[x]
[x]

关于如何解决此问题的任何建议？

Answer 1

这里有几个问题。首先：

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

你应该在浮点数之后有一个保持恒定的 DIV，告诉你的浏览器不要浮点任何后续元素（clear：both）。

而且你有几个"最终"的DIV，所以它们在一个CSS类中，而不是一个ID。

.final {
  float: left;
}

那应该可以！

编辑：至少可以修复您的HTML/CSS错误。但我刚刚注意到您希望文档向右滚动。执行此操作的唯一方法是将 #containerdiv 的宽度设置为比 .finaldiv 的所有宽度之和宽。否则，您的浏览器将尝试将所有内容"向下"推送。

Answer 2

试试这个...

<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;
}