三欄レイアウト(左右幅固定,中間適応)の実現方式とその延長問題

グローバルCSS設定

html *{
    padding: 0;
    margin: 0;
}
section {
	margin: 20px 0;
}
article > div {
	min-height: 100px;
}

浮動の3つの欄の配置はまず左右の箱を書いてから中間の箱のhtml構造を書いて、左右の2つの箱の幅の高さと浮動を設置しなければなりません

<section class="layout float">
	<style>
		.layout.float .left-middle-right {
			overflow: hidden;  /*    */
		}
		.layout.float .left-middle-right .left {
			width: 300px;
			float: left;
			background: red;
		}
		.layout.float .left-middle-right .right {
			width: 300px;
			float: right;
			background: blue;
		}
		.layout.float .left-middle-right .middle {
			background: yellow;
		}
	style>
	<article class="left-middle-right">
		<div class="left">leftdiv>
		<div class="right">rightdiv>
		<div class="middle">middlediv>
	article>
section>

真ん中の箱の高さが左右を超えると、親DIVの幅がいっぱいになり、内容が左に流れるのは、フローティングの原理と関係があります.ブロック級の要素なので、左右の箱を超えないと、ブロックがブロックされ、超えるとブロックされず、自然と残りの場所が埋め込まれます.元の幅と一致するには、marginを加えます.

<section class="layout float">
	<style>
		.layout.float .left-middle-right {
			overflow: hidden;  /*    */
		}
		.layout.float .left-middle-right .left {
			width: 300px;
			float: left;
			background: red;
		}
		.layout.float .left-middle-right .right {
			width: 300px;
			float: right;
			background: blue;
		}
		.layout.float .left-middle-right .middle {
			background: yellow;
			margin-left: 300px;
			margin-right: 300px;
		}
	style>
	<article class="left-middle-right">
		<div class="left">leftdiv>
		<div class="right">rightdiv>
		<div class="middle">middlediv>
	article>
section>

利点:比較的簡単で互換性も良い.フローティングをクリアすれば問題ありません.
欠点:フローティングレイアウトには限界があり、フローティング要素はドキュメントフローから離れているため、フローティングをクリアするには、この処理が悪いと、高度な陥没など多くの問題をもたらし、中間htmlが最後に書かれているため、重要な内容を優先的にロードできません.
絶対位置決め三欄レイアウト親箱を相対位置決めし、左右の箱を絶対位置決めし、両側に密着し、中間箱を両側箱に対してleftとrightを設定し、同時に高さを設定する

    <section class="layout absolute">
    	<style>
			.layout.absolute .left-middle-right {
				position: relative;
			}
			.layout.absolute .left-middle-right .left {
				position: absolute;
				width: 300px;
				left: 0;
				background: red;
			}
			.layout.absolute .left-middle-right .right {
				position: absolute;
				width: 300px;
				right: 0;
				background: blue;
			}
			.layout.absolute .left-middle-right .middle {
				position: absolute;
				left: 300px;
				right: 300px;
				background: yellow;
			}
    	style>
    	<article class="left-middle-right">
    		<div class="left">leftdiv>
    		<div class="right">rightdiv>
    		<div class="middle">middlediv>
    	article>
    section>

長所:とても速くて、設置はとても便利で、その上問題をも出しにくくて、あなたはすぐにこのような配置の方式を考え出すことができて、その上JSと一緒に設置を使うことができます
欠点:絶対的な位置決めはドキュメントフローから離れており、次のすべてのサブ要素がドキュメントフローから離れていることを意味し、この方法の有効性と使用性が比較的悪い.
flex三段レイアウト

    <section class="layout flex">
    	<style>
			.layout.flex .left-middle-right {
				display: flex;
				margin-top: 140px;
			}
			.layout.flex .left-middle-right .left {
				width: 300px;
				background: red;
			}
			.layout.flex .left-middle-right .right {
				width: 300px;
				background: blue;
			}
			.layout.flex .left-middle-right .middle {
				flex: 1;
				background: yellow;
			}
    	style>
    	<article class="left-middle-right">
    		<div class="left">leftdiv>
    		<div class="middle">middlediv>
    		<div class="right">rightdiv>
    	article>
    section>

利点:felxboxレイアウトはcss 3に新しく出たもので、上記の2つの方法の不足を解決するために現れたもので、比較的完璧なものです.現在、モバイル側のレイアウトもflexboxを使用しています.
欠点:IE 9と以下のブラウザは互換性がありません.
表レイアウト表の親コンテナの幅を設定するには

    <section class="layout table">
    	<style>
			.layout.table .left-middle-right {
				width: 100%;
				display: table;
				height: 100px;
			}
			.layout.table .left-middle-right .left {
				width: 300px;
				background: red;
				display: table-cell;
			}
			.layout.table .left-middle-right .right {
				width: 300px;
				background: blue;
				display: table-cell;
			}
			.layout.table .left-middle-right .middle {
				background: yellow;
				display: table-cell;
			}
    	style>
    	<article class="left-middle-right">
    		<div class="left">leftdiv>
    		<div class="middle">middlediv>
    		<div class="right">rightdiv>
    	article>
    section>

長所:表のレイアウトは歴史の上で多くの人に捨てられて、表のレイアウトが面倒で、操作が煩雑だと言って、実はこれは1種の誤解で、多くのシーンの中で、表のレイアウトはやはりとても適用して、例えばこの3欄のレイアウト、表のレイアウトで簡単に書きました.また、テーブルレイアウトの互換性がよく、flexレイアウトが互換性がない場合は、テーブルレイアウトを試してみることができます.
欠点:表のレイアウトにも欠陥があり、そのうちの1つのセルの高さが超えると、両側のセルも一緒に高くなりますが、この効果は私たちが望んでいない場合があります.
グリッドレイアウト

    <section class="layout grid">
    	<style>
			.layout.grid .left-middle-right {
				width: 100%;
				display: grid;
				grid-template-rows: 100px;
				grid-template-columns: 300px auto 300px;
			}
			.layout.grid .left-middle-right .left {
				width: 300px;
				background: red;
			}
			.layout.grid .left-middle-right .right {
				width: 300px;
				background: blue;
			}
			.layout.grid .left-middle-right .middle {
				background: yellow;
			}
    	style>
    	<article class="left-middle-right">
    		<div class="left">leftdiv>
    		<div class="middle">middlediv>
    		<div class="right">rightdiv>
    	article>
    section>

利点:メッシュレイアウトを作成する最も強力で簡単なツールです.表のように、グリッドレイアウトはWebデザイナーが要素に基づいて列または行に整列させることができますが、彼は表とは異なり、グリッドレイアウトにはコンテンツ構造がなく、様々なレイアウトが表と同じではありません.たとえば、1つのグリッドレイアウトのサブ要素は、独自の位置を特定できます.これにより、要素の位置を重ねたり類似したりすることができます.
短所:互換性が悪い.IE 10+でサポートされており、一部の属性のみサポートされています.
聖杯レイアウト

メインパネルの設定幅は100%で、メインパネルと2つのサイドバーはすべてフローティングを設定して、よく左フローティングで、この2つのサイドバーはメインパネルに押し下げられて、負のマージンを設定することによってフローティングのサイドバーを引き上げて、左側の欄の負のマージンは100%で、ちょうどウィンドウの幅なので、メインパネルの下の左からメインパネルに位置する左に走って、右側の欄はこの時メインパネルの下の左にフローティングして、負の余白を負に設定した自己幅は、メインパネルの右側にちょうど浮動します.

サイドバーがメインパネルの内容を遮らないように、外層に左右のpadding値を左右のサイドバーの幅として設定し、サイドバーにスペースを空けると、メインパネルの幅が小さくなります.サイドバーの負の余白はメインパネルに対して相対的であるため、2つのサイドバーは私たちの理想的なように左右に止まるのではなく、縮小したメインパネルとともに中間に寄せ合い、このとき相対レイアウトを使用して、2つのサイドバーを対応する位置に調整します.

dom構造が変化しないことに注意し、浮動を除去し、高さの崩壊を避けることに注意する

.

<section class="layout shengbei">
 	<style>
		.layout.shengbei .left-middle-right {
			padding: 0 300px 0 300px;
		}
		.layout.shengbei .left-middle-right > div {
			position: relative;
			float: left;
		}
		.layout.shengbei .left-middle-right .left {
			left: -300px;
			background: red;
			width: 300px;
			margin-left: -100%;
		}
		.layout.shengbei .left-middle-right .right {
			right: -300px;
			width: 300px;
			background: blue;
			margin-left: -300px;
		}
		.layout.shengbei .left-middle-right .middle {
			background: yellow;
			width: 100%;
		}
 	style>
 	<article class="left-middle-right">
 		<div class="middle">middlediv>
 		<div class="left">leftdiv>
 		<div class="right">rightdiv>
 	article>
 section>

利点:主要部分を優先的にレンダリングでき、互換性がよく、構造が簡単です.
欠点:

には最小幅があり、ページが最小幅より小さいとレイアウトが乱れます.

なのでbodyにmin-widthを設定したほうがいいです.このmin-widthは試したものではないに違いないが、どうやって計算するのだろうか.つまりleft-width*2+right-widthですが、なぜかというと、簡単に言えば「相対的な位置が設定されているので、leftの元の位置とrightの位置が重なると、フローティングのせいで1行が置けないと改行する」ということです.

「聖杯レイアウト」は幅が小さすぎてレイアウトが混乱する欠陥があるため、アリタオバオは「双飛翼レイアウト」

を提案した.
両翼の配置思想:

	<section class="layout feiyi">
    	<style>
    		.layout.feiyi .left-middle-right {
    			overflow: hidden;
    		}
    		.layout.feiyi .left-middle-right > div {
    			float: left;
    		}
    		.layout.feiyi .left-middle-right .left {
    			width: 300px;
    			background: red;
    			margin-left: -100%;
    		}
    		.layout.feiyi .left-middle-right .right {
    			width: 300px;
    			background: blue;
    			margin-left: -300px;
    		}
    		.layout.feiyi .left-middle-right .content {
    			width: 100%;
    			background: yellow;
    		}
    		.layout.feiyi .left-middle-right .middle {
    			margin: 0 300px;
    		}
    	style>
    	<article class="left-middle-right">
    		<div class="content">
    			<div class="middle">middlediv>
    		div>
    		<div class="left">leftdiv>
    		<div class="right">rightdiv>
    	article>
    section>

利点:聖杯レイアウトの問題を解決し、汎用性が高く、様々な幅の変化をサポートする
欠点:ただし、「ダブルフラップレイアウト」はDOMツリーのレベルを増加させるため、ブラウザレンダリングエンジンがレイアウトツリーを構築する際の計算消費量も増加します.
ダブルフライ翼レイアウトは聖杯レイアウトよりもdivを1つ多く作成しましたが、相対的にレイアウトする必要はありません.
その他のレイアウト方法

	<section class="layout new">
    	<style>
    		.layout.new .left-middle-right {
    			position: relative;
    		}
    		.layout.new .left-middle-right > div {
    			
    		}
    		.layout.new .left-middle-right .left {
    			position: absolute;
    			top: 0;
    			width: 300px;
    			background: red;
    			left: 0;
    		}
    		.layout.new .left-middle-right .right {
    			position: absolute;
    			top: 0;
    			width: 300px;
    			background: blue;
    			right: 0;
    		}
    		.layout.new .left-middle-right .middle {
    			margin: 0 300px;
    			background: yellow;
    		}
    	style>
    	<article class="left-middle-right">
    		<div class="middle">middlediv>
    		<div class="left">leftdiv>
    		<div class="right">rightdiv>
    	article>
    section>

互換性も比較的強い
延長1:
1、各方法の長所と短所は、上に2、高さが既知でない場合、中間の内容が開いている場合、前の方法はどれがまだ使用できますか?

marginのフローティング三欄レイアウト

を追加

flexレイアウト

テーブルレイアウト

聖杯レイアウト

両翼レイアウト

には、さらに別の方法でレイアウト

がある.
3、各方法の互換性はどうですか.
延長2:ページレイアウトの変形3段レイアウト:

左右幅固定、中間適応

上下高さ固定、中間適応

2つのバーのレイアウト:

左幅固定、右適応

右幅固定、左適応

上高さ固定、下適応

下高さ固定、上適応