CSS では、列レイアウトを実装する方法が 2 つあります。 1 つ目の方法は、4 つの CSS 配置オプション (絶対、静的、相対、固定) のうちの絶対配置 (絶対配置) を使用することで、ドキュメント内の要素を元の位置から削除して、任意の場所に再配置できます。 2 つ目は、CSS で float の概念を使用することです。
絶対配置またはフローティングを使用して、列効果を実現できます。この 2 つは独立して使用することも、相互に補完するために組み合わせて使用することもできます。
1. 絶対位置決め 絶対位置決めの利点は、推測や運が関係なく、あらゆる要素の位置を正確に制御できることです。絶対配置された要素は、痕跡を残さずに通常のドキュメント フローから完全に削除されるため、他の要素には影響を与えません。
それでは、絶対配置を使用して次のレイアウトを実装する方法を試してみましょう。
これは 3 列のレイアウトで中央揃えです。このうち、A列がメインコンテンツ列、B列とC列がサイド列です。まず、絶対位置決めを直接使用して 3 つの列 A、B、および C を中心位置に配置することはできません。これは、各人のモニターの解像度が異なるためです。解像度 1024X768 のモニター上で位置決めを行うと、中心位置に影響が及びます。他の解像度では機能しません。高速モニターで見られる効果は間違いなく中央に表示されません。では、この問題を解決するにはどうすればよいでしょうか。
幸いなことに、絶対配置モデルには非常に便利な機能があります。つまり、絶対配置要素のコンテナも配置されている場合、要素によって指定された上部と左の値はルート要素に基づきません。ドキュメントの html (ブラウザ ウィンドウの左上隅でもあります) ですが、オフセットはコンテナの左上隅に基づいて計算されます。つまり、配置されたコンテナは、そのコンテナ内のすべての要素の絶対配置の開始点として機能します。
したがって、この機能を使用して、以下に示すように、列 A、B、および C の外側にコンテナ D を追加します。
次に、コンテナ D を中央に配置し、それに属性を追加します:position:relative このように、絶対配置を使用して A、B、C の上部と左の値を配置します。A、B の位置。 、C はコンテナ D に基づきます。目的の 3 列のセンタリング効果が達成できるように、左上隅の位置が計算されます。
ただし、一般的に使用されるレイアウトはそれほど単純ではありません。以下に示すように、3 つの列に加えてヘッダーとフッターも必要です。
現時点では、絶対配置の要素はドキュメント フローから完全に削除されるため、絶対配置のレイアウトを使用することはできません。このとき、フッターはヘッダーの隣に表示され、ヘッダーの下に表示されます。
絶対配置を使用する必要がある場合は、3 つの列それぞれの高さを事前に把握し、最も高い列に基づいてフッターを配置する必要があります。 JavaScript の使用に加えて、列内のテキストの長さを決定できない場合は、絶対的な位置決めの考えを放棄し、代わりにフローティング レイアウトの採用に投資するしかありません。
2. フローティング
フローティングの本来の目的は、記事に挿入された画像を左または右にフローティングさせることです。これにより、画像の下のテキストが自動的に画像を回り込み、左側または右側に大きな空白ができなくなります。写真の右側。
フローティングの構文はシンプルですが、マスターするのはそれほど簡単ではありません。フローティングをレイアウトに使用する方法の例を示します。同様に、フッター付きの 3 列レイアウトを実装します。以下に示すように:
float を使用してそのような効果を実現するにはどうすればよいでしょうか?実際、これは非常に簡単です。
1. E と中央の E の幅を設定します。
2. A、B、および C の幅をそれぞれ設定し、A、B、および C を左側に設定します。
3. クリアを設定します
。フローティングレイアウトで
も通常のドキュメント フローに従うため、絶対配置と比較して、フローティング配置では HTML ソース ファイル内の要素宣言の位置が特に重要であることを説明する必要があります。 もちろん、この問題を解決する最も簡単な方法は、ソース ファイル内の左の列と右の列の宣言順序を入れ替えることです。ただし、列の順序を入れ替えずに同じレイアウトを実現する方法もあります。比較の使用 負のマージン値を使用するあいまいな方法。通常の状況では、ソース ファイルの左列と中央列の宣言の順序を交換することを選択する可能性が高くなります。