水平對齊div，沒有垂直堆疊，在IE7中

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保持不變，告訴你的瀏覽器不浮動任何後續元素（明確：兩者）。

而你有幾個「final」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; 
}