CSS 2 列レイアウトの実装方法の概要を共有する

この記事では主に CSS の 2 列レイアウトの実装方法の概要を紹介し、absolute + margin および float + margin メソッドを含むいくつかの実践方法と問題について説明します。必要な友人は参照してください

2 列レイアウトはおそらく最も古典的です。 one これは Web ページのレイアウト方法であり、このブログではこのレイアウトを使用しています。 2 列レイアウトでは、メイン列 (メイン) の幅が適応型で、サブ列 (サイドバー) の幅が固定であるのが最も一般的です。
今日は、この固定幅 + アダプティブ 2 列レイアウトを実装する方法について説明します。

1. 絶対値 + マージン法

まず思いつくのは、絶対値 + マージン法を使用することです。まずコードを見てみましょう:

<p class="container">
    <p class="sidebar">子列</p>
    <p class="main">主列</p>
</p>

.container {   
 position: relative;   
}   
.sidebar {   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

このメソッドは、位置を使用してサイドバー列をドキュメント フローから取り出し、次にメイン列の左マージンを使用してサイドバー列で覆われた部分を削除します。このようにして、固定幅 + アダプティブ 2 列レイアウトを実現しました。

(1) 列の順序の調整

HTML を変更せずに、CSS を変更するだけで、左右の列の順序を入れ替えることができます。コードを見てください:

.sidebar {   
 position: absolute;   
 top: 0;   
 rightright: 0;   
}   
.main {   
 margin-right: 210px;   
}

(2) Mainコンテンツ列が最初に表示されます

もっと完璧に考えてみましょう。メインコンテンツを最初にロードしてレンダリングできるように、メイン列をサイドバー列の前に置くことはできますか?試してみましょう！

<p class="container">
    <p class="main">主列</p>
 <p class="sidebar">子列</p>
</p>

上記の簡単な調整を行うだけで、CSS を変更する必要はありません。

(3) 問題点

この方法には多くの利点がありますが、致命的な欠点があります。サイドバー列はドキュメント フローから分離されているため、サイドバー列がメイン列よりも高い場合、後続のレイアウト: 問題のデモがカバーされます。
コンテナコンテナにoverflow:hiddenを追加すると、サイドバーのオーバーフロー部分がカットされます。このレイアウトでは、この問題に対する効果的な解決策は実際にはありません。

2. Float + margin メソッド

次に思い浮かぶのは、2 列レイアウトを実装するための float + margin です。まず、左側の列の幅が固定され、メイン コンテンツが適応される 2 列のレイアウトです。 。コードは次のとおりです:

<p class="sidebar">子列</p>
<p class="main">主列</p>

.sidebar {   
 float: left;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

この実装方法は比較的単純です。まずサブ列を左側にフローティングし、次にメイン列に margin-left を設定してサブ列の表示スペースを残します。

では、このメソッドは列の位置の交換をサポートしていますか?もちろん。 CSS コードは以下の通りです:

.sidebar {   
 float: rightright;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-right: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

問題点:

float + margin の方法は良い方法のようですが、前述した最初に表示されるメインカラムの最適化が達成できません。

3. float + negative margin メソッド

これ以上はナンセンスです。コードに直接進みましょう:

<p class="main-wrapper">
    <p class="main">主列</p>
</p>
<p class="sidebar">子列</p>

.main-wrapper {   
 float: left;   
 width: 100%;   
}   
.main {   
 height: 100px;   
 margin-left: 210px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sidebar {   
 float: left;   
 width: 200px;   
 height: 100px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}

これはダブルウィング レイアウトであり、メイン列が最初に表示されることに誰もが気づいたはずです。実装プロセスは次のとおりです:

まずメイン列とサイドバー列をフロートさせ、次に負のマージンを介してサイドバー列を正しく配置します。
メイン列を p にネストし、p の幅の値を 100% に設定します。
最後に、メイン列の左マージンを設定して、サイドバーで覆われた部分を削除します。

以上がCSS 2 列レイアウトの実装方法の概要を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。