CSS Webページレイアウト入門チュートリアル6：左列固定、右列幅適応_基本チュートリアル

実際のアプリケーションでは、ブラウザ ウィンドウのサイズに応じて自動的に調整するために、左列と右列の幅を固定する必要がある場合があります。そのようなレイアウトを CSS で実装するのは簡単で実現可能です。必要なのは次のことだけです。上の例のように、左の列の幅を設定します。左の列と右の列の両方でパーセンテージを使用して幅の調整を実装します。左の列の幅を固定値に設定するだけでよく、幅の値を設定する必要はありません。右側の列は浮動しません。コードは次のとおりです:

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

#left {
背景色: #E8F5FE;
ボーダー: 1px 実線 #A9C9E2;
フロート: 左;
高さ: 300px;
幅: 200px;
}
#right {
背景色: #F2FDDB;
境界線: 1px 実線 #A5CF3D;
高さ: 300px;
}

このようにして、左側の列には 100% の幅が表示され、右側の列はブラウザ ウィンドウのサイズに応じて調整されます。

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