div 左右のlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div 左右のlayout_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:58

オリジナル

1483 人が閲覧しました

CSS で左と右の列の幅をそれぞれ指定する場合、左の div を左にフロート {float:left;}、右の div を右にフロート {float:right;} するだけで済みます。フロートは実現できます。
フロートをクリアするには、次の 2 つの一般的な方法があります。 a. フローティング要素の親要素にフローティングクラスを追加します。 (以下の CSS コードのセクションを参照)。
b. フローティング要素の後に追加します。
2.
可変幅レイアウト: 可変幅レイアウトは、片側の可変幅と両側の可変幅の 2 つの形式に分かれています。実際のアプリケーションでは、この状況は採用されません。片側の幅が可変の左右のレイアウト方法を詳しく分析してみましょう。
1.
左側は固定幅、右側は幅が変化します。左側が上で右側が下です; (左側が上で右側が下です) に遭遇したとき。この場合、2 つの div を左右にレイアウトする必要があります。方法は基本的に左右の固定幅レイアウトと同じです。左側の div を左にフロートして {float:left;} にするだけです。 . フローティングの場合、右側の div はフローティングされた「div left」に従います。つまり、左右の列のレイアウトが実装されています。
2.
左側は固定幅、右側は可変幅、左が下、右が上です右側の div を上に書きます。通常はコンテンツを上に置きます。 Webサイトのコンテンツを読み込んだときに最初に表示される右側この場合、「左側にメニュー、右側にコンテンツ」というレイアウトがよく使われます。
以下の点の要約:
1) 右の div を右にフローティングし、負の margin-left を設定します。
2) 右の div 内に div を追加してコンテンツを右側に配置し、必要な左マージンの幅を計算します。、このデータを {margin-left:280px;} のように div の margin-left に設定します
3) フローティングした後、必ず親要素または次の要素の float をクリアしてください。
サンプルコード

片側に固定幅、左下と右上の構造が左右の列のレイアウトをどのように実現するかを理解するために、簡単な例を使用してみましょう: html code
:

左右のレイアウト - 左側は固定幅、右側は可変幅、左下

top

< p>右、私は右側です

右、私は右です

右、私は右側ですright

はい、私は右側です< /p>

I私は左側です

下

css コード
:
/* リセット * /*,body{margin:0;padding:0;}/* commons */
body{font-size:13px;}
.clearfix{zoom:1;}
.clearfix:after{content:´. ´;display:block;visibility:none;height:0;clear:both;}
#bd{background-color:#DDD;min- height:50px;_height:50px;}
#bd .right{背景色:red;float:right;width:100%;margin-left:-25em;}
#bd .right .content{margin-left: 270px;background-color:blue;color:#FFF;}
#bd . left{background-color:green;color:#FFF;width:260px;float:left;}