左半分と右半分のレイアウト - さまざまな方法

数年前、CSS-Tricksは2列のレイアウトを作成するためのさまざまな方法を調査しました。 この更新された記事は、これらの手法の包括的な概要を提供します。

コンテナ内の2つの等しい高さの列にレイアウトが分割される必要があるとしましょう。 多数のCSSアプローチがこれを達成し、いくつかを調べます

アップデート（2024年10月25日）：

この記事には、CSSアンカーポジショニングを使用した例が含まれています。 背景グラデーションテクニック

単純な視覚的アプローチでは、背景勾配を使用します。 背景の半分を1色で定義し、残りの半分は異なる色で定義します。 ゼロスペースのカラーストップは、鋭い分割を作成します：

これは単一のコンテナで動作しますが、コンテンツが両側を埋める必要がある場合はフロートまたはその他のレイアウト方法が必要です。

絶対的な位置決め方法

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

または、親の2つのコンテナを使用し、それらを絶対に配置し、パーセンテージを使用してスペースを分割します。これにより、各列の独立したコンテンツが可能になります。 ただし、親には固定された高さが必要であり、動的なコンテンツに問題がある場合があります。 絶対的な位置は、ドキュメントフローから要素を削除し、他のコンテンツに影響を与える可能性があります。

（偽）テーブルアプローチ

レイアウトのためにテーブルが時代遅れです（およびアクセシビリティの懸念をもたらします）が、

は便利なソリューションを提供します。 親コンテナはテーブルになり、子容器はセルになり、すべてCSSで処理されます。 この方法は、ブレークポイントでディスプレイプロパティを変更することにより、さまざまな画面サイズに簡単に適応できます。 IE8にさかのぼる幅広いブラウザのサポートを楽しんでいます フロートの使用

フロートは、絶対的なポジショニングの合併症を避けて、別のオプションを提供します。 明示的な高さの設定は、柱の高さを確実に保証しますが、フロートは本質的にこの機能を提供しません。 背景グラデーションまたはその他の手法は、高さの錯覚を生み出すことができます。適切なドキュメントの流れを維持するために、親のフロートをクリアすることを忘れないでください。

インラインブロックメソッドdisplay: table-cell;

フロートに代わるよりクリーンな代替品を提供し、クリアの必要性を回避します。 ただし、不要な間隔を防ぐために、列のHTML要素の間にスペースやラインの破損がないことを確認してください。 繰り返しますが、列の高さが等しいために明示的な高さ設定が必要です。

FlexBoxソリューション

FlexBoxはエレガントなソリューションを提供しますが、サポートはIE10以上に制限されています。 親コンテナはフレックスボックスになり、子コンテナはスペースを均等に自動的に共有します。 子のコンテナに

を設定すると、平等な分布が保証されます。 この方法は、垂直および水平のセンタリングを効果的に処理します。

グリッドレイアウト

高度なユーザーの場合、CSSグリッドレイアウトは、FlexBoxとテーブルアプローチの柔軟性を組み合わせています。容器を定義し、子要素で満たすことができる柱とセルにそれを分割します。

cssアンカーポジショニング（new！）

新しい機能（2024）であるCSSアンカーポジショニングにより、無関係な要素をリンクできます。 「アンカー」要素が定義され、「ターゲット」要素が固定されています。 これにより、ポジショニングを正確に制御できます：

CSS技術の豊富さは、その汎用性を強調しています

以上が左半分と右半分のレイアウト - さまざまな方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。