CSS パーフェクト DIV+CSS レイアウト_html/css_WEB-ITnose

-- コツは、まず、大きい DIV の CSS スタイルで境界線を 1 ピクセルの青で実線に設定し、全体のレイアウトを調整した後に削除することです

1. 最初に最も外側のフレームを取得します

コードを表示します

1 <div id="outterDiv">2 3 </div>

2. すぐにCSSを追加

コードを表示

1 <style type="text/css">2 3 #outterDiv{ width:600px; }4 5 </style>

3. レイアウトの左右の構造を分析

コードを表示

1 <div class="InnerDiv">2 3 </div>4 5 <div class="InnerDiv">6 7 </div>

CSSを追加

れーれー

5 . left-right-bottom 構造の場合

コードを表示

1 .InnerDiv { width:49%; float:left; overflow:hidden; margin-left:5px; display:inline; }

6. CSS を追加

コードを表示

 1 <div class="LeftDiv"> 2  3 </div> 4  5 <div class="RightDiv"> 6  7 </div> 8  9 <div class="DownDiv">10 11 </div>

7. 左側の部分は上下 2 つの DIV に分かれています

コードを表示

rrリー

8.CSSを追加

コードを表示

1 .LeftDiv { width:200px; float:left; margin-left:17px;margin-top:10px; display:inline; }2 .RightDiv { width:40px; float:left; display:inline; margin-left:5px; margin-top:100px; }3 .DownDiv { width:200px; text-align:center;margin-bottom:8px; }

9. 各DIVコンテンツを入力

10. すべてのコード

コードを表示

<div class="NameDiv"></div><div class="SortDiv"></div>