CSS Web ページ レイアウト入門チュートリアル 5: 2 列幅のadaptive_Basic チュートリアル

2 列固定幅から始めて、2 列レイアウトを試し始めると、左右の列の幅が適応可能になりますが、1 列適応レイアウトから、適応設定は主に次の方法で設定されることがわかります。幅のパーセンテージ値なので、2 列になります。幅アダプティブ レイアウトでは、幅のパーセンテージ値も設計されます。上記の CSS コードを続けて、2 列目の幅の値を新たに定義する必要があります。

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

#left {
背景色: #E8F5FE;
ボーダー: 1px ソリッド #A9C9E2;
フロート: 左;
高さ: 300px;
幅: 20%;
}
#right {
背景-カラー: #F2FDDB;
ボーダー: 1px ソリッド #A5CF3D; フロート: 左;
高さ: 300px;
幅: 70%;
}

左列の幅は幅の 20% に設定され、右列の幅は幅の 20% に設定されます。ページの 70% は、左側にナビゲーションとコンテンツを備えた一般的な Web ページのように見えます右側に。

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