フローティング配置方法を使用すると、固定幅と 1 列から複数列への適応 (3 列の固定幅を含む) が基本的に簡単に完了します。ここでは、左の列は固定幅が必要で左側に表示され、右の列は固定幅が必要で右側に表示され、中央が 3 列のレイアウトを希望する新しい要件が与えられています。列は、左列と右列の間にある必要があります。列の中央は、左列と右列の間の間隔の変化に自動的に適応します。
これにより、レイアウトに対する新たな要件が提示されます。これは、float 属性とパーセント属性を使用するだけでは達成できません。現在、CSS は、左右の列が占めるスペースを考慮するのに十分な精度のパーセンテージ計算をサポートしていません。中央の列に 100% を使用します。幅については、左の列と右の列の間の中央の間隔ではなく、ブラウザ ウィンドウの幅が使用されるため、この問題を再考する必要があります。
絶対位置決め
このような 3 列レイアウトを開始する前に、新しい位置決め方法である絶対位置決めを理解する必要があります。従来のフローティング配置方法では、主にオブジェクトの内容に応じてブラウザがフローティング方向を自動的に調整できますが、この方法では配置要件を満たせない場合、フローティング配置以外の別の方法を CSS で提供する必要があります。位置決め方法は、position 属性を使用して実現される絶対位置決めです。
位置は、オブジェクトの位置決め方法を設定するために使用されます。 使用可能な値: 静的/絶対/相対。
ページ上のすべてのオブジェクトのデフォルトの位置プロパティは静的です。オブジェクトをposition:absoluteに設定すると、オブジェクトはドキュメントフローから外れ、ページ全体の位置に応じて再配置されます。この属性を使用すると、上、右、下、左、つまり上、右、下、左の 4 方向の距離値を使用して、オブジェクトの特定の位置を決定できます。以下を参照してください。 CSS:
#layout {
位置:絶対;
上:20ピクセル;
左:0ピクセル;
、
絶対位置指定モードになります。同時に、top:20px; を設定すると、ブラウザ ウィンドウの上部から常に 20px 離れた位置になります。ブラウザウィンドウの上部から離れていることは、ブラウザの左マージンが0pxであることを意味します。 。
注: オブジェクトがposition:absolute; に設定されている場合、その位置決めモードは他のオブジェクトに影響を与えず、ある意味、absolute を使用した後の他のオブジェクトの浮動位置決めにも影響されません。配置すると、オブジェクトは Web ページ上でレイヤーのように浮遊します。
オブジェクトが絶対に配置されると、ページとの浮動関係は考慮されなくなり、オブジェクトの上、右、下、左の方向の値を設定するだけで済みます。
この場合、絶対位置決めを使用すると、私たちが提起した問題をうまく解決できます。同様に、3 つの div を使用して 3 つの列構造を形成します。
＃左 {
背景色: #E8F5FE;
境界線: 1 ピクセルの実線 #A9C9E2;
高さ: 400ピクセル;
幅: 200ピクセル;
位置: 絶対;
上: 0px;
左: 0px;
}
＃右 {
背景色: #FFE7F4;
境界線: 1 ピクセルの実線 #F9B3D5;
高さ: 400ピクセル;
幅: 200ピクセル;
位置: 絶対;
上: 0px;
右: 0px;
}
このように、左列は left: 0px; で左端近くに表示され、右列は right: 0px; で右から表示され、#center が表示されます。中央では通常の CSS スタイルを使用します。
＃中心 {
背景色: #F2FDDB;
境界線: 1 ピクセルの実線 #A5CF3D;
高さ: 400ピクセル;
マージン右: 202px;
マージン左: 202px;
}
#center の場合、フローティング メソッドを設定する必要はありません。左マージンを持たせ、常に #lef と #right の幅を維持するだけで済みます。これにより、両側で 202px の適応幅が実現されます。左側と右側の適応幅は 202px です。この距離により、#left と #right をこのスペースに表示できるようになり、要件が満たされます。