適応3列レイアウトを達成するための様々な方法

適応3列レイアウトを達成するための様々な方法

      Web開発、多くの場合、真ん中の3列レイアウト適応の幅を一定の幅を周りに遭遇、我々はページのレンダリングのために（ここでは3つの一般的な方法をされている説明は、このような中間部分をレンダリングし、優先度、および会場杯フライングのレイアウトを必要とするよう、必要ありませんウイング）

この方法の一つ：

HTML構造：

		<div class="box">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>

      まず、私たちが最初に考えフロート、もたらすために優先度の高い順に、すべての浮動を残しました。観察を容易にするために、我々は、背景色を追加します

		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
		.center{float: left;height: 300px;background-color: #DC143C;}
		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;}

      あなたは、中央部が適応ではありません、我々は新しいCSS3プロパティCALEを使用することができます見ることができます。電卓の等価幅の左右両側には、幅の途中で失われます。

.center{float: left;height: 300px;background-color: #DC143C;width:calc(100% - 500px);}

      ここでは、前後にスペースを持つようにマイナス記号に注意しなければなりません。

欠点：新しいc3のためのCalcは相性が非常に良いではありません増加しました。

方法2：

      上記の方法は、途中で第二の方法でフロート法のHTML構造にしようとしない、我々がしようと、この時間を漂っ、浮動と話しました。

		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
		.center{height: 300px;background-color: #DC143C;}
		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;}

      これは必然的に中央部までの権利を強制浮遊改行につながるドキュメントフローのうちフローティングのまま、問題が発生します。

      私たちは、その後、浮遊移動ブラウザの右上に発言権を見つけ中央部との重複の問題の左部分に特徴的なBFCのソリューションを使用することができます。すなわち、BFCの領域は、浮動ボックスと重なっていません。オーバーフローで：隠された;あなたは、他のトリガBFCここに一時的に詳細に入ることができます。

		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
		.center{height: 300px;background-color: #DC143C;overflow: hidden;}
		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;
				position:absolute;right: 0;top: 0;}

      今してちょうど宣言マージン右追加中間領域を与えるために：300ピクセルを、（この場合は文書の流れからの絶対位置の右部分を、マージン右に影響を与えないであろう。）を達成することができる
短所：多くの問題が、互換性比法を強いです。

方法3：

      HTMLの二つの方法は、単に構造が左右され、優先度の順に、順番に第3の方法で変化。
HTML構造：

		<div class="box">
			<div class="left">我是左边的部分</div>
			<div class="right">我是右边的部分</div>
			<div class="center">我是中间的部分</div>
		</div>

      左右への構造。我々は右浮動要素の右に、左の要素をfloatに残っている場合は、真ん中のは当然今限り、中間領域がBFCなるにつれて、上がる、ページが3列には私たちが望むレイアウトになります。

			.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
			.center{height: 300px;background-color: #DC143C;overflow: hidden;}
			.right{float: right;width: 300px;height: 200px;background-color: #FFFF00;}

長所：シンプル、実装が容易;
短所：ページのレイアウトを変更する必要性が、レイアウト程度となります。