在IE7中水平对齐，没有垂直堆叠 [英] Align divs horizontally, no vertical stacking, in IE7

问题描述

我有一个固定的容器，里面是一个额外的容器，根据用户的选择容纳一些DIV。我需要这些额外的DIV来水平排列并提供水平滚动（但不是垂直滚动）。

例如：

[x] [x] [x]

I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).
Such as this:
[x] [x] [x]

基本上，我的设置如下：

Essentially, my setup looks like this:

<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中断。所有#finaldiv都垂直堆叠：

[x]

[x]

[x]

This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]

有关如何解决这个问题的任何建议吗？

Any suggestions on how to fix this?

推荐答案

开头为：

<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）。

You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).

而且你有几个finalDIV，所以它们在一个CSS类中，而不是一个ID。

And you have several "final" DIVs, so they be in a CSS class, not an ID.

.final {
  float: left;
}

这应该可以！

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

That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".

这篇关于在IE7中水平对齐，没有垂直堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！