ページレイアウト - 絶対配置レイアウト

1。

1  <！DOCTYPE HTML > 
2  < HTML > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8"  /> 
5      < タイトル>绝对定位布局</ タイトル> 
6      < スタイルタイプ= "テキスト/ CSS" > 
7        .wrapのDIV { 
8              位置：絶対。
9              分の高さ：200pxの。
10          } 
11          .LEFT {
図12は、             左：0 。
13              幅：300ピクセル。
14              背景：赤。
15          } 
16          .RIGHT { 
17              右：0 。
18              幅：300ピクセル。
19              背景：青; 
20          } 
21          .center { 
22              左：300ピクセル。
23              右：300ピクセル; 
24              背景：ピンク; 
25          }  
26  
27      </ スタイル> 
28  </ ヘッド> 
29  < ボディ> 
30      < DIV クラス= "ラップ" > 
31          < DIV クラス= "左" >左</ DIV > 
32          < DIV クラス= "センター" >绝对定位布局</ divの> 
33          <= "右" >権利</ DIV > 
34      </ DIV > 
35  </ ボディ> 
36  </ HTML >

結果は以下の通りであります：