フロント3列のレイアウト

        フロントエンド開発では、3列のレイアウトは非常に基本的なシナリオです。この記事では、3列のレイアウトを実装する方法と長所と短所、および3列のレイアウトに関連するいくつかのレイアウト方法について説明します。

        3列のレイアウトの要件は通常、次のとおりです。

              1.左側と右側の幅は固定されており、中央の幅はアダプティブです。

              2.中央の列の内容を完全に表示できます。

      この状況は、ポジショニングとフローティングで実現できます。

        1.位置決めの使用位置決めの使用は、主に、絶対位置決めオフセットによって左右の列を左右に配置することです。

#middle { 
 background：deeppink; 
 padding：0 200px; //この文を追加する必要があります。追加しない場合、中央の列のコンテンツの一部が左側の列で覆われます
} 
#left { 
 position：absolute; 
 left：0; 
 top：0; 
 幅：200px; 
 背景：ピンク; 
} 
#right { 
 位置：絶対; 
 右：0; 
 上：0; 
 幅：200px; 
 背景：ピンク; 
}

効果：

 2.フローティングを使用するこの場合、中央の列にパディングを設定する必要がなく、コンテンツを完全に表示できます。フローティングはハーフレベルを上げるだけなので、左と右の要素がフローティングの場合、次の要素が補充されます。ハーフレベルだけが上がるので、次の要素の下半分だけが持ち上げられ、上半分は持ち上げられません要素の上半分はテキストに関連付けられ、下半分はモデルに関連付けられているため、中央に他のスタイルを設定しなくても、中央の列を完全に表示できます。

注：フローティングを使用する場合は、middleに対応するDOM要素を下に配置する必要があります。

＃left、＃right { 
 width：200px; 
 背景：ピンク; 
} 
#left { 
 float：左; 
} 
#right { 
 float：右; 
} 
#middle { 
 background：deeppink; 
}

効果：

 

2つの場合の問題：1.ウィンドウを縮小するために位置決めを使用すると、問題が発生します（含まれている位置決めブロックに関連）。 

                              2.フローティングを使用する場合、中央の列はHTML構造の最後のDOM要素に対応するため、最後に読み込まれるため、ユーザーエクスペリエンスに影響を与える可能性があります。

                              3.どちらの方法にも共通の問題があります。つまり、1つの列の高さが変化しても、他の2つの列はそれに応じて変化せず、視覚効果が特に醜くなります。

上記の問題に対応して、対応するレイアウトソリューションもこれらの問題を解決するように見えました。

1.疑似輪郭レイアウト、このレイアウト方法は輪郭レイアウトを視覚的に実現しますが、実際には輪郭レイアウトではありません。

#wrap { 
 width：750px; 
 ボーダー：1pxソリッド; 
 マージン：0自動; 
 オーバーフロー：非表示。
} 
#wrap .left { 
 float：left; 
 幅：200px; 
 背景：ピンク; 
 padding-bottom：1000px; 
 margin-bottom：-1000px; 
} 
#wrap .right { 
 float：left; 
 幅：500px; 
 背景：ディープピンク; 
 padding-bottom：1000px; 
 margin-bottom：-1000px; 
} 
.clearfix { 
 * zoom：1; 
} 
.clearfix：after { 
 content： ""; 
 表示ブロック; 
 明確：両方; 
}

 

2.真ん中の列が最初に読み込まれることを理解するための聖杯のレイアウト。

 

 

#content { 
 オーバーフロー：非表示; 
 パディング：0 200px; 
} 
＃header、＃footer { 
 高さ：20px; 
 text-align：中央; 
 ボーダー：1ピクセルの濃い濃いピンク。
 背景：灰色; 
} 
#content .middle、＃content .left、＃content 
 .right { padding-bottom：10000px; 
 margin-bottom：-10000px; 
} 
#content .middle { 
 float：左; 
 幅：100％; 
 背景：ピンク; 
 / * padding：0 200px; * / 
} 
#content .left { 
 position：relative; 
 左：-200px; 
 margin-left：-100％; 
 float：左; 
 幅：200px; 
 背景：黄色; 
}
#content .right { 
 position：relative; 
 右：-200px; 
 margin-left：-200px; 
 float：左; 
 幅：200px; 
 背景：黄色; 
} 
.clearfix { 
 * zoom：1; 
} 
.clearfix：after { 
 content： ""; 
 表示ブロック; 
 明確：両方; 
}

3.デュアルウィングのレイアウトは、真ん中の列を最初にロードすることにもなります

 

＃header、＃footer { 
 border：1px solid; 
 背景：灰色; 
 text-align：中央; 
} 
#content .middle、＃content .left、＃content .right { 
 高さ：50px; 
 line-height：50px; 
 float：左; 
} 

/ *双飞翼布局* / 
#content { 
 overflow：hidden; 
} 
#content .middle { 
 width：100％; 
 背景：ディープピンク; 
} 
#content .middle .m_inner { 
 padding：0 200px; 
} 
#content .left、＃content .right { 
 background：pink; 
 幅：200px; 
 text-align：中央; 
} 
#content .left { 
 margin-left：-100％; 
} 
#content .right {
 margin-left：-200px; 
}