10日間で学ぶDiv+CSS 3日目【2カラムと3カラムレイアウト】_html/css

1 列または 2 列のアダプティブ幅
以下では、一般的な左列固定と右列アダプティブを例として取り上げます。これは、div がブロック要素であり、デフォルトで 1 行のスペースを占めるためです。右の場合、これを実現するには css float を使用する必要があります。まず、次のように HTML コードを作成します。

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

ログイン後にコピー

div が作成されたら、CSS スタイルシートの作成を開始します。コードは次のとおりです。

#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

ログイン後にコピー

次に、 #main スタイルを作成します。 #main は 120px に設定されています。プレビュー結果は次のとおりです。

2. 2 列の固定幅
前の基礎を使用すると、#main の幅をパーセントからに変更するだけで済みます。固定値。

3. 2 列の固定幅のセンタリング
2 列の固定幅のセンタリングは、2 列の固定幅をベースにして改善する必要があります。1 つの列を固定幅でセンタリングする方法はわかります。中央に配置するには、ここで div に加えて、親 div を追加する必要があります。

<div id="side">此处显示 id "side" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

ログイン後にコピー

CSS コードは次のとおりです:

#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

ログイン後にコピー

4. ブロックレベルの要素。 xhtml の (div) 要素とインライン要素 (span)
ブロックレベル要素: デフォルトでは、段落と同様にボックスが 1 つだけ占有されます。

インライン要素: 名前が示すように、インライン要素とも呼ばれ、その中にのみ配置できます。単語と同じように、前後に改行を入れずに、補助的な役割を果たします。

段落

、title

...、list、

、table、form<などの一般的なブロックレベルの要素;form>、DIV

、および BODY。インライン要素には次のようなものがあります: フォーム要素、ハイパーリンク、画像 10日間で学ぶDiv+CSS 3日目【2カラムと3カラムレイアウト】_html/css_WEB-ITnose

、.... ブロックレベル要素の顕著な特徴は次のとおりです。各ブロックレベル要素は次のとおりです。は新しい行から表示され、後続の要素も新しい行に表示する必要があります。

ブロックレベルの要素はデフォルトで 1 行を占めますが、これはその前後に改行を挿入することと同じですが、インライン要素のスパンは表示効果に影響を与えません。これは em のみに当てはまります。フォントは斜体になり、単独で行を占有することはありません。これらはブロックレベルの要素とインライン要素です。Web ページが豊かでカラフルになるのは、これらの要素のおかげです。

cssの機能を使用しないと、ブロック要素が1行ずつ順番に配置されていきます。 CSS を使用すると、この HTML のデフォルトのレイアウトモードを変更し、必要な場所にブロック要素を配置できます。愚かにも毎回新しい行を始めるのではなく。つまり、CSS の display:inline を使用してブロックレベル要素をインライン要素に変更することができます。また、display:block を使用してインライン要素をブロック要素に変更することもできます。

5. 3 列の適応幅
3 列の適応幅は、左右の列が固定され、中央の列がブラウザの幅に応じて適応される構造です。次に、2 列の適応幅を変更します

<div id="side">此处显示 id "side" 的内容</div><div id="side1">此处显示 id "side1" 的内容</div><div id="main">此处显示 id "main" 的内容</div>

ログイン後にコピー

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

ログイン後にコピー

元の #main スタイルの幅: 70% を削除し、左と右のマージンをそれぞれ 120 ピクセルに設定して、左側の幅のためのスペースを確保します6. 3 列固定幅

3 列固定幅 3 列アダプティブに基づいて親 div を追加し、この div の幅を設定できます。次のように追加します。コンテンツの ID を持つ親コンテナ。

ソースコードでこれらの 3 つの div を選択し、ツールバーの [div タグの挿入] ボタンをクリックすると、ポップアップウィンドウの挿入項目がデフォルトで次のようになります: 選択したコンテンツの横にラップし、コンテンツとして ID を入力します。 , そして、この div の幅を定義します

3 列の固定幅を実現して中央に配置したい場合は、#content {margin を設定する方が便利です。 :0 自動;}

rree