3 列レイアウトの n 個の実装

この記事では主に、左右のサイドバーが固定幅で、中央の列が残りのスペースを埋めるレイアウトについて説明します。他のタイプについては、基本的には半斤と 8 オンスです。各レイアウトにはデモが含まれますが、記事に掲載されているコードはデモほど直接的ではないと思います。したがって、本文で説明を担当し、ソース コードは Demo にあります。ここでは、次の理由から非常に多くの種類のレイアウト (6) が説明されています。 1 各レイアウトにも欠点があり、完璧なレイアウトは存在せず、すべてのレイアウトに独自のものがあります。使用中です。 2 比較的優れた解決策もありますが、それほど優れていない解決策の中にも有用なものがあり、不足している知識点を補うために他のアイデアを刺激する可能性があります。

1. 絶対配置機能を使用する: 左列と右列は絶対配置を使用してドキュメント フローを分離し、それぞれページの左側と右側に固定されます。中央の列は開くことで収容できます。左と右の margin 値 左と右のサイドバー間の距離。これは非常に簡単で、ほとんど説明は必要ありません。 デモ:http://www.dabao.love/demo/layoutDemo/absoluteLayout.html
2. ドキュメント フローを占有しないように両側でフローティングを使用します: 左の列は左にフロート、右の列は右にフロートし、左右の マージン 値は中央の列の幅は、左右の列の幅と同じです。 html では、中央の列を左側と右側の列の後ろに配置する必要があります。この原理は絶対配置と似ています。つまり、ドキュメント フローを占有せず、他の要素が埋め込まれます。重ならないように両側にスペースを残すだけです。デモ: http://www.dabao.love/demo/layoutDemo/twoSidesFloatLayoutDemo.html
3. 浮動マージン値と負のマージン値の特性を使用する: ラベルの順序は 中幅 100%、サブ左右のマージンは左右の列用のスペースを残します 、 のうち、 sub 要素をフローティングにしないでください。そうしないと、コンテンツが内側にラップされ、他のすべての要素が左にフローティングされます。左のマージン左は -100%、右のマージン左はサブの負の マージン右です。フローティングの特徴は、前の要素に続き、収まりきらない場合は改行することです。本来、midle 要素は最初の行と、sub の余白のスペースを占めます。 要素は他の浮動要素ではありません。左列は 2 行目の左端の位置に強制的に折り返されます。これは、100% とすると、最初の行が最初の行の左端になります。このとき、左の列は sub 要素の左端のスペースと一致します。このとき、右の列は左の列の元の位置にあり、同様の処理方法を使用して最終的な効果を実現します。同じ原理と効果で、sub のマージンをパディングに置き換えることができます。ここのスペースを埋める必要がない場合 (サブ要素を埋めるコンテンツがある場合)、親要素 (つまり、中央) は必要ありません。デモ: http://www.dabao.love/demo/layoutDemo/floatLayoutDemo.html

4. インラインブロック機能の使用 : 親要素には左、中央、右の列が含まれます: (子要素は左、右の順) 親要素は、左と右のスペースを残すようにパディングを設定します。右の列の場合、中央の列の幅は 100% になります。パディング以外のスペースを占有し、独自の幅の負の値に等しい margin-left を使用して、左右の列を中央の列の右端と一致させます。次に左を調整します。左列の左は -100%、右列の左は右列の幅です。左、中、右の列はすべて子要素であるため、margin-left はパディングスペースを占有することができません。目的の状態を達成するには、左側と右側の列を相対的に配置し、左側の値を調整する必要があります。親要素は font-size: 0; Letter-spacing: -4px; を設定し、子要素はこれら 2 つの属性をリセットすることに注意してください。デモ: http://www.dabao.love/demo/layoutDemo/inlineBlockLayoutDemo.html calc 属性と inline-b
lo
5. ck 機能を使用します : (親要素には左、中、右の列も含まれます)

🎜> 文字間隔: -4px; 左、中央、右の列をリセットします: font-size: 16px; 文字間隔:normal;

HTML の要素の順序は、左、中央、右の順に固定されています。

の幅は 300 ピクセルです。

中央ブロック: width:calc(100% - 300px);

パーセントおよび固定幅の混合レイアウトが使用されます。ie9+ をサポートします。+-＊/ 記号の両側にスペースがあることに注意してください

デモ: http://www.dabao.love/demo/layoutDemo/useCalcLayoutDemo.html

6. フレックス レイアウトを使用する: フレックス レイアウトは最も高度で便利なレイアウトだと思います。残念ながら、ie10+。早速、Ruanyifeng 先生のチュートリアルをお勧めします: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 親要素の表示: flex; 、左右の列は flex-basis のプリセット幅を設定し、中央の列は flex-grow: 1; 自動的に 伸縮します。完全な人生。デモ: http://www.dabao.love/demo/layoutDemo/flexLayoutDemo.html

間違いがある場合は、私を批判して修正してください。間違いがない場合は、私を批判してください。