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

Question

我遇到了这个问题，div在Firefox和Chrome中的对齐方式。 我需要两个div具有未定义宽度的div并排在div包裹中。我们的想法是生成一个内容很长的滚动条。

我遇到的问题是在Firefox 22.0中，display最终堆叠在Chrome 28.0中，它运行正常。以下是该问题的两个屏幕截图。

火狐

铬

这是Firefox的怪癖吗？这是一个可以使用clear或{{1}}属性修复的问题吗？

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

Answer 2

而不是在子divs样式类中使用float: left使用display: inline-block;和vertical-align-top。

Answer 3

另外你可以使用vertical-align：top到图像属性来将图像对齐到div容器的顶部