html - Chrome では機能するが Firefox では機能しない水平方向に配置された div

Question

divFirefox と Chrome で sがどのように整列するかという問題に直面しています。幅が定義されていない2 つdivの s を、ラッピングで並べて配置する必要がありdivます。アイデアは、コンテンツでいっぱいの長いスクロールバーを作成することです。

私が抱えている問題は、Firefox 22.0 ではdivs がスタックしてしまい、Chrome 28.0 では正常に動作していることです。問題の 2 つのスクリーンショットを次に示します。

ファイアフォックス

クロム

これは Firefox の癖ですか? displayまたはclearプロパティで修正できる問題ですか?

Answer 1

display: inline-block;要素を左にフローティングする代わりに、で使用できますwhite-space: nowrap;

デモ

#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

子 div スタイル クラスの両方でfloat: leftusedisplay: inline-block;とを使用する代わりに。vertical-align-top

Answer 3

さらに、画像プロパティに vertical-align: top を使用して、画像を div コンテナーの上部に揃えることができます