複数列の Web サイトに最適な CSS レイアウト手法 (float:left、display:inline、display:inline-block、または display:table-cell) はどれですか?

レイアウト テクニックの探索: float:left;、display:inline;、display:inline-block;、および display:table-cell;

の長所と短所各メソッド

複数列の Web サイト レイアウトが必要なため、Web デザイナーはいくつかの手法の中から選択する必要があります。 float:left;、display:inline;、display:inline-block;、display:table-cell;。

Float:left
プロは float:left; を好むことがよくあります。 IE6 や 7 などのブラウザ間での互換性を実現します。これにより列レイアウトが効果的に有効になりますが、clear:both; などの追加のマークアップが必要になります。親要素の折りたたみを避けるため。さらに、このメソッドでは、テキストの正確な垂直方向の配置に課題が生じます。

Display:inline
この手法は、float:left; の親の折りたたみの問題に対処します。ただし、要素間に不要な空白が作成される可能性があります。 HTML 空白の削除によってこれらのスペースを削除することは、HTML 純粋主義者にとって問題であることがわかります。同じ空白の問題を維持しながら、display:inline; と同様に動作します。この制限は、要素を密に詰め込む必要があるレイアウトの場合に問題になります。

Display:table-cell
Display:table-cell;は、HTML のテーブル構造に似た、正確な列レイアウトのソリューションを示しています。ただし、この方法をサポートしていない古い IE バージョンでは互換性の問題が発生します。さらに、テーブルセルを使用します。単独で使用すると、HTML テーブル要素内での意図された使用法から逸脱し、ブラウザーの動作に一貫性がなくなる可能性があります。

個人の好みとブラウザーの互換性最適な方法は、最終的には Web デザイナーの好みと互換性要件によって決まります。対象となるブラウザの数。好みはさまざまですが、普遍的に優れたテクニックはありません。

代替テクニックは説明されていません

上記の方法に加えて、他のレイアウト テクニックも存在します。

CSS Columns

を使用すると、テキストが列間でシームレスに流れることができますが、互換性は維持されます制限されています。

• CSS FlexBox は、レイアウトの柔軟性に優れていますが、まだ開発中であり、ベンダー プレフィックスが必要です。

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