`float:left`、`display:inline`、`display:inline-block`、または `display:table-cell`?複数列レイアウトに最適な CSS 表示プロパティはどれですか?

float:left;、display:inline;、display:inline-block;、または display:table-cell;?

の場合複数列のレイアウトを設計する場合、使用できる CSS 表示プロパティがいくつかあります。一般的に使用されるものをそれぞれ見てみましょう。

float:left;

float:left; 2 つの画像を並べてフローティングするのと同様に、要素を水平方向に隣り合ってフローさせることができます。ただし、追加の「clear:both;」が必要です。親要素の折りたたみを防ぐためのステートメント。

display:inline;

display:inline;要素をインライン要素として扱い、テキストの 1 行に沿って流れます。これにより、要素間に不要な空白が生じる可能性があります。

display:inline-block;

display:inline-block;インライン要素とブロック要素のプロパティを組み合わせて、要素がブロックレベルの動作を維持しながら水平方向に隣り合って流れることを可能にします。ただし、空白は依然として問題となる可能性があります。

display:table-cell;

display:table-cell; float:left; と同様に動作しますが、要素を垂直方向に整列させるため、垂直方向の整列が必要な表やその他のシナリオに最適です。

プロフェッショナルの設定とブラウザの動作

好みに関しては、Web デザイナーの間で絶対的なコンセンサスはありません。多くの場合、選択は特定のプロジェクトと望ましい結果によって異なります。

ブラウザの動作に関しては、float:left; を使用します。そして表示:インラインブロック;広く支持されています。表示:インライン;そして表示:テーブルセル; IE6 や IE7 などの古いブラウザでは動作が異なる場合があります。

追加テクニック

ここで説明したオプション以外にも、CSS 列と CSS FlexBox を検討してください:

• CSS Columns: の専用機能を提供します。複数列のレイアウトをサポートしますが、サポートは特定のブラウザに限定されます。
• CSS FlexBox: 洗練されたレイアウトのための強力で柔軟なツールですが、開発は進行中です。

以上が`float:left`、`display:inline`、`display:inline-block`、または `display:table-cell`?複数列レイアウトに最適な CSS 表示プロパティはどれですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。