コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル 10日間で学ぶDiv+CSS 3日目【2カラムと3カラムレイアウト】_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 pm 12:30 PM

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、