html - 水平对齐的 div 在 Chrome 中工作，但在 Firefox 中不工作

Question

我遇到了 div 在 Firefox 和 Chrome 中如何对齐的问题。我需要两个宽度未定义的 div 在包装 div 中并排放置。这个想法是产生一个充满内容的长滚动条。

我遇到的问题是，在 Firefox 22.0 中，div 最终堆叠起来，而在 Chrome 28.0 中它工作正常。这是问题的两个屏幕截图。

火狐

Chrome

这是 Firefox 的怪癖吗？这是一个可以通过 display 或 clear 属性解决的问题吗？

Answer 1

您可以将 display: inline-block; 与 white-space: nowrap; 一起使用，而不是将元素向左浮动。

Demo

#wrapper {
    display: inline-block;
    border:2px solid red;
    white-space:nowrap;
    overflow:hidden;
}
#images {
    height:200px;
    border:4px solid blue;
    display: inline-block;
    overflow:hidden;
}
#thumbs {
    height:100px;
    border:4px solid green;
    display: inline-block;
}