フローティングポジショニングを使用して、1つの列から複数の列までの固定幅と適応性は、3つの列の固定幅を含めて、基本的に簡単に完了できます。ここでは、3列のレイアウトがあることを望んで新しい要件を提出しました。左列には固定幅が必要で、左側に表示され、右の列には固定幅が必要で、右側に表示され、中央が表示されます。列は左の列と右の列にある必要があります。 これにより、レイアウトの新しい要件があり、Float属性とパーセンテージ属性を使用することは、現在100％と右の列のプレースホルダーを考慮に入れることができません幅の中央の列に使用されると、左列と右の列間の中間間隔ではなく、ブラウザウィンドウの幅を使用するため、この問題を再考する必要があります。 #layout { #layoutは、絶対的なポジショニングモードになります。左マージンは0pxです。 。 このようにして、左の列が左端の左側に表示され、右側の列が右側に表示されます。 #centerの場合、#lefと#rightの幅を常に維持するために左外のマージンを設定する必要があります。左側と右側の距離により、#Leftと#rightをこのスペースに表示できるようにするため、要件を達成できます。
絶対的なポジショニング
このような3列のレイアウトを開始する前に、新しいポジショニング方法、つまり絶対的なポジショニングを理解する必要があります。以前のフローティングメソッドは、オブジェクトのコンテンツに応じてブラウザによって自動的に調整されています位置属性を使用して、ポジショニングと絶対的な位置付けが達成されます。
オブジェクトを配置するために利用可能な値を設定するために使用される位置：静的/絶対/相対
ページ内のすべてのオブジェクトについて、デフォルトの位置プロパティは静的です。オブジェクトを位置に設定すると、絶対に設定すると、オブジェクトはドキュメントストリームから分離され、ページ全体の場所に従って再配置されます。このプロパティを使用する場合、上部、右、下、左、つまり、上、右、左の4つの方向の距離値を使用して、次のCSSを参照してください。
位置：絶対;
トップ：20px;
左：0px;
}
注：オブジェクトが位置に設定されている場合、それは本質的に他のオブジェクトから分離され、他のオブジェクトに影響を与えません絶対的な位置付け、オブジェクトはレイヤーのようにWebページに浮かびます。
絶対に配置された後、オブジェクトは、ページ内の浮動的な関係で考慮されなくなります。
この場合、絶対的なポジショニングを使用すると、私たちがよく提起した問題を解決できます。同様に、3つのdivを使用して3つの列構造を形成します。
＃左 {
バックグラウンドカラー：＃e8f5fe;
ボーダー：1pxソリッド＃a9c9e2;
高さ：400px;
幅：200px;
位置：絶対;
上：0px;
左：0px;
}
＃右 {
バックグラウンドカラー：＃ffe7f4;
ボーダー：1pxソリッド＃F9B3D5;
高さ：400px;
幅：200px;
位置：絶対;
上：0px;
右：0px;
}
＃中心 {
バックグラウンドカラー：＃f2fddb;
境界線：1pxソリッド＃a5cf3d;
高さ：400px;
マージン右：202px;
マージン左：202px;
}