ULリストマークデザインWebページマルチカラムレイアウト_HTML/Xhtml_Webページ制作

数日前に CSS で 3 列のレイアウトを書いていたときに、この方法を突然思いつきました。このアイデアは私には少しおかしいように思えます。何か間違っていることがあれば、お気軽にアドバイスをお願いします。
3 列のレイアウトを記述する必要がある場合、私は通常、次の DIV レイアウト方法を使用することを選択します。
図1 DIVレイアウト
このような入れ子方法を使用すると、間違いなくコード エラーの可能性を大幅に減らすことができますが、同時に、そのようなレイアウトは少し複雑になり、後のメンテナンスに少し不便になります。ナビゲーションをレイアウトするときによく使用する方法は、レイアウトに

リストを使用することです。この場合、ページ レイアウトに
を使用することもできます。
図2 DIVレイアウト
これは固定幅レイアウトです。つまり、流動的なレイアウトはまだテストされていません。時間があるときに、このレイアウトのコードを以下に貼り付けます。

ldquo;-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>



複数列レイアウトに UL を使用する ボディ {
幅:100%;高さ:100%;
背景:#ddedfb;}
#mainContent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80px;
clear:both;
}
#footer {
• clear:both;
padding-top:10px;
}
• #content {
  height:300px;
  margin:10px auto;
  }
  • #content ul {
  list-style:none;
  height:100%;
  • }
  #content ul li {
  幅:150px;
  高さ:100%;
  背景:#8AC7FA;
float:left;
}
• #content ul li#li2 {
幅:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0 ;
}



こちらが頭ですこちらが左側ですこれが真ん中の上の部分ですこれが真ん中の下の部分です こちらが右側ですこちらが下です このコードは IE7 と FF3 では正常に表示されます。他のブラウザではテストされていません。より良い方法がある場合は、提案してください。