2つの要素のインラインブロック - サイズ変更時にフローなし

Question

インラインブロックを使用して複数の列を持つ最良の方法を探しています。ブラウザのサイズが変更された場合を除いて、すべてがうまくいきます。 2番目の列は、インラインブロックで期待されるように、最初の列の下にプッシュされます。私は、なぜそれが起こるのか理解しています。第2列を押し下げるのではなく、水平スクロールを行う方法があるかどうかを知る必要があります。私はオーバーフローだと思った：隠された、しかしそれはそう思わない。

私は現在幅を設定しておらず、できるだけ流動的なものにしておきたいと考えています。

<div> 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

COL1とCOL2はない幅を設定してインラインブロックであり、ブラウザビューが十分に広い場合、それらを並べて表示します。ユーザーのブラウザのサイズを小さくするとcol2がcol1の下に表示されます。私は彼らがいつも横に並んでいて、必要に応じて横スクロールをしたい。

Answer 1

display: inline-blockを持つ要素の親にwhite-space: nowrapを追加します。

Answer 2

<div style="width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

またはあなたが外側のdivにmin-widthを設定してみること

<div style="min-width:500px"> // <=== try to make fix width 
    <div id="col1"></div> 
    <div id="col2"></div> 
</div> 

Answer 3

を試してみてください。したがって、ウィンドウが小さい場合にのみ適用され、実際のサイズは修正されません。