フロントエンド開発におけるマルチカラムレイアウトの実装方法

今回はフロントエンド開発におけるマルチカラムレイアウトの実装方法についてお届けします。フロントエンド開発でマルチカラムレイアウトを実装する際の注意点を紹介します。

複数列レイアウト

複数列レイアウトも、Web フロントエンド開発では比較的一般的です。たとえば、一般的な 3 列、4 列以上の列レイアウトを使用すると、1 つのページでより分類されたコンテンツを表示できます。ここで言う複数列レイアウトには、固定幅の 2 列と 1 つのアダプティブ列、可変幅の複数列と 1 つのアダプティブ列、および複数列レイアウトが含まれます。

固定幅の 2 列とアダプティブ レイアウトの 1 列

このレイアウト モードは 3 つの列に分割されており、そのうち 2 つは固定幅で、1 つの列は幅がコンテンツの幅に応じて変化します。

固定幅の 2 列と適応幅の 1 列

この場合、各列の高さはアダプティブです。つまり、高さは、左と中央の列の幅が 100 ピクセルであり、右の列の幅がアダプティブです。 floatフローティング レイアウトとブロックレベルの要素の特性を組み合わせたものです。背景色は p タグまたは p タグに設定できることに注意してください。

可変幅の複数の列と適応可能な 1 つの列

ここで説明するケースは、可変幅の 2 つの列と 1 つの適応列を備えた高度に適応性のあるレイアウト スキームです

ここでは可変幅の複数の列と適応可能な 1 つの列を示します

最初に理解するのは、可変幅とは、レイアウトを変更せずに、列の幅をいつでも他の値に設定できることです。このレイアウトを実装するコードは上記と同じです。注意する必要があるのは、可変幅と適応幅の違いです。

複数の列の等しい部分

複数列レイアウトは、ページ上に複数の列を表示し、これらの列の幅と間隔を一定にし、高さを調整します。

複数列分散レイアウトの簡単な実装 親コンテナで

margin-left

を -20px に設定し、親コンテナの幅に 20px を追加し、列コンテナで left float を設定し、各子コンテナの幅を親コンテナの 25% に設定し、同時に子コンテナのpadding-leftは20px、表示モードはborder-boxです(この現実的な方法で表示されるボックスモデルの幅と高さはボックスの幅と高さです)。このソリューションでは、親コンテナの幅を 20px (ギャップ幅) 増やし、子コンテナ内の間隔を表示し、子コンテナを境界ボックスとして設定することにより、均等な分散を実現します。 この記事では、float を使用して複数列レイアウトを実装するソリューションのみをリストします。flex、table などを使用した対応する実装ソリューションもあります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がフロントエンド開発におけるマルチカラムレイアウトの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。