2

「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 を並べて、つまり列として表示する必要があります。それぞれが必要なだけ部屋を占めてほしい。表示したいものを使用すると、それぞれが約 100px しか占有しないため、いくつかの列を並べて表示するのに十分なスペースが簡単に確保できます。最初の列にはラベルがあり、2 番目の列はデータのビット、3 番目の列はラベル、4 番目の列はデータのビットです。

ページのより高いレベルのビューを提供するために、左側にフローティングしている div があります。その右側には、複数のデータ列が必要です。ちなみに、これは Chrome では機能しますが、IE では機能しません。

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

4

4 に答える 4

6

インラインブロックを削除し、フローティングを使用し、幅とパディングマージンを割り当てます。これがデモです

于 2012-05-08T18:12:01.817 に答える
4

を使用inline-blockしても、要素の折り返しは妨げられません。実際、div要素に適用すると逆になります。

于 2012-05-08T18:02:30.583 に答える
2

使用してfloatください。詳細については、http: //css-tricks.com/all-about-floats/を参照してください。

于 2012-05-08T18:07:07.013 に答える
0

それらをすべて並べて表示したい場合は、それらを含む要素に十分な幅が必要です。whitespace: nowrap; を適用することで要素内での折り返しを防ぐことができますが、これはマークアップの構造によっては他の影響を与える可能性があります。

于 2012-05-08T18:03:34.563 に答える