"display：inline-block"であっても、DIVの折り返しが行われます

Question

"display：inline-block"を設定したdiv（複数列ページ）があります。これがラッピングを防ぐべきではありませんか？私はそれらを並べて欲しい：

div.LabelColumn 
{ 
    display: inline-block; 
    padding: 10px 0 0 40px; 
    vertical-align: top; 
} 

div.DataColumn 
{ 
    display: inline-block; 
    padding: 10px 0 0 5px; 
    vertical-align: top; 
} 

明確にするために、私はDIVを並べて、すなわち列として表示したい。私は彼らのそれぞれが必要とするほどの部屋を取るようにしています。私が表示したいものを使って、それらのそれぞれは約100ピクセルしか使いませんので、いくつかの列を並べて表示するのに十分な余裕があります。最初の列はラベルを持ち、2番目の列はデータのビット、3番目の列はラベル、4番目の列はデータのビットです。

ページの上位ビューを表示するために、私は左に浮いているdivを持っています。その右には、複数のデータ列が必要です。ちなみに、これはChromeでは動作していますが、IEでは動作しません。

可能であれば、DIVのテキストと同じ幅に自動的に調整するようにしたいと思います。

Answer 1

インラインブロックを削除し、フローティングを使用し、幅とパディングマージンを割り当てます。 Here is the demo

Answer 2

inline-blockを使用しても、要素の折り返しが防止されません。実際には、div要素に適用すると、逆の処理を行います。

Answer 3

これらをすべて並べて表示するには、その要素を含めるには十分な幅が必要です。空白：nowrap;を適用することで、要素内で折り返しが発生するのを防ぐことができますが、これはマークアップをどのように構造化したかによって、他の効果があります。

Answer 4

使用float。詳細については、http://css-tricks.com/all-about-floats/