CSS は Web ページの複数列レイアウトに ul を使用します

著者：Eve Cole 更新時間：2009-05-31 01:02:37

数日前に CSS で 3 列のレイアウトを書いていたときに、この方法を突然思いつきました。このアイデアは私には少しおかしいように思えます。何か間違っていることがあれば、お気軽にアドバイスをお願いします。

3 列のレイアウトを記述する必要がある場合、私は通常、次の DIV レイアウト方法を使用することを選択します。

このような入れ子方法を使用すると、間違いなくコードエラーの可能性を大幅に減らすことができますが、同時に、そのようなレイアウトは少し複雑になり、後のメンテナンスに少し不便になります。ナビゲーションをレイアウトするときによく使用する方法は、レイアウトに <ul> リストを使用することです。この場合、<ul> を使用してページをレイアウトすることもできます。列のレイアウト。

これは固定幅のレイアウトなので、まだテストされていません。時間があるときにこのレイアウトのコードを貼り付けます。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<頭>
<meta http-equiv=”Content-Type” content=”text/html;
<title>複数列レイアウトに UL を使用する</title>
<style type="text/css">
* {マージン:0; パディング:0;}
体 {
幅:100%;
高さ:100%;
背景:#ddedfb;
}
#メインコンテンツ {
幅:600ピクセル;
マージン:10px 自動;
}
#ヘッダー、#フッター {
背景:#8AC7FA;
高さ:80ピクセル;
クリア:両方;
}
#フッター {
クリア:両方;
パディングトップ:10px;
}
＃コンテンツ {
高さ:300ピクセル;
マージン:10px 自動;
}
#contentul {
リストスタイル:なし;
高さ:100%;
}
#コンテンツ{
幅:150ピクセル;
高さ:100%;
背景:#8AC7FA;
フロート:左;
}
#contentulli#li2 {
幅:280ピクセル;
マージン:0 10px;
}
#コンテンツウルリ#li2ウルリ{
幅:270ピクセル;
高さ:140ピクセル;
マージン:5px;
背景:#0581F0;
}
</スタイル>
</head>

<本文>
<div id="メインコンテンツ">
<div id="header">これはヘッダーです</div>
<div id="コンテンツ">
<ul>
<li>これは左側です</li>
<li id="li2">
<ul>
<li>これは中央の上部です</li>
<li>これは中央の下部です</li>
</ul>
</li>
<li>これは右側です</li>
</ul>
</div>
<div id="footer">これが一番下です</div>
</div>
</body>
</html>

このコードは IE7 と FF3 では正常に表示されます。他のブラウザではテストされていません。より良い方法があれば提案してください。