CSS Web ページ レイアウト入門チュートリアル 8: フローティング中央列幅 3 列adaptive_Basic チュートリアル

フローティング配置方法を使用すると、固定幅と 1 列から複数列への適応 (3 列の固定幅を含む) が基本的に簡単に完了します。ここでは新しい要件が与えられています。3 列のレイアウトが必要です。ベースの左の列は固定幅が必要で、左側に表示されます。右の列は固定幅が必要で、右側に表示されます。中央の列は左の列と右の列の間にある必要があります。右の列の中央は、左右の列間の間隔の変化に応じて自動的に調整されます。これにより、レイアウトに対する新しい要件が提示されますが、float 属性とパーセント属性を使用するだけでは達成できません。CSS は現在、左右の列が占めるスペースを考慮できるほど正確なパーセント計算をサポートしていません。中央の列に 100% を使用します。幅については、左の列と右の列の間の中央の間隔ではなく、ブラウザ ウィンドウの幅が使用されるため、この問題を再考する必要があります。

絶対位置決め
このような 3 列レイアウトを開始する前に、新しい位置決め方法である絶対位置決めを理解する必要があります。従来のフローティング配置方法は主にオブジェクトの内容に応じてブラウザが自動的にフローティング方向を調整するものでしたが、この方法では配置要件を満たせない場合には新たな方法が必要になります。CSSではフローティング配置以外の別の方法も用意されています。位置決め方法は、position 属性を使用して実現される絶対位置決めです。

position オブジェクトの配置方法を設定するために使用されます。使用可能な値: static/absolute/relative

ページ内のすべてのオブジェクトのデフォルトの位置属性は静的です。
オブジェクトがposition:absoluteに設定されている場合、オブジェクトはページ全体の位置に従って再配置されます。この属性を使用する場合、上、右、下、左、つまり距離値を使用できます。上、右、下、左の 4 方向にオブジェクトを配置します。オブジェクトの特定の位置を決定するには、次の CSS を参照してください:

#layout {
Position:absolute;
top:20px;
left:0px;
}
If# レイアウトでposition:absolute;を使用すると絶対位置決めモードとなり、同時にtop:20px;を設定すると、は常にブラウザ ウィンドウの上部から 20 ピクセル離れた位置にあり、 left:0px; はブラウザの左マージンから離れていることを保証します。は 0px です。

注: オブジェクトがposition:absoluteで設定されている場合、そのオブジェクトは基本的に他のオブジェクトから分離されます。その配置モードは他のオブジェクトに影響を与えず、他のオブジェクトのフローティング配置の影響も受けません。つまり、絶対配置を使用した後、オブジェクトは Web ページ上でレイヤーのように浮遊します。

オブジェクトを絶対配置した後は、ページとの浮動関係は考慮されなくなり、オブジェクトの上、右、下、左の方向の値を設定するだけで済みます。

この場合、絶対位置決めを使用すると、提起した問題をうまく解決できます。同様に、3 つの div を使用して 3 つの列構造を形成します。

コードをコピー コードは次のとおりです。

#left {
背景色: #E8F5FE;
境界線: 1px 実線 #A9C9E2;
高さ: 400px; 幅: 200px;
位置: 絶対;
上: 0px;
左: 0px;
}
#right {
背景色: #FFE7F4;
境界線: 1px 実線 #F9B3D5;
高さ: 400px;
幅: 200px;
位置: 絶対;
上: 0px;
右: 0px;
}

このように、左の列はleft: 0px;で左端近くに表示され、右の列はright: 0px;で右から表示されるようになります。 、中央の #center は通常の CSS スタイルを使用します:

コードをコピー コードは次のとおりです。

#center {
背景色: #F2FDDB;
境界線: 1px 実線 #A5CF3D;
高さ: 400px;
margin-right: 202px;
margin-left: 202px;
}

#center の場合、フローティング メソッドを設定する必要はありません。左マージンを持たせ、常に#lef と #right の幅により、両側で 202px の適応幅が実現され、左側と右側の間の距離は、#left と #right がこのスペースに表示されるのに十分な距離であるため、要件を満たしています。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>瀹</title>