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，告诉您的浏览器不要浮动任何后续元素（清除：两者）。

你有几个“最终”DIV，所以他们是CSS类，而不是ID。

.final {
  float: left;
}

应该这样做！

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

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

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

2 个答案: