数日間CSSで3列のレイアウトを書いていたとき、私は突然この方法を考えました。このアイデアに少し夢中になりました。何か問題がある場合は、アドバイスをください。
3列のレイアウトを書く必要がある場合、通常、次のDivレイアウト方法を使用することを選択します。
図1 DIVレイアウト
このようなネスティング方法を使用すると、間違いなくコードエラーの確率が大幅に低下する可能性がありますが、同時に、そのようなレイアウトは少し複雑であり、後のメンテナンスには少し不便です。ナビゲーションのレイアウトの場合、<ul>リストをレイアウトに使用するメソッドを使用することがよくあり、ナビゲーションはマルチコラムレイアウトとして説明できます。これは事実であるため、<ul>を使用して複数の列をページにレイアウトすることもできます。
図2 Divレイアウト
これは固定された幅のレイアウトです。つまり、流動性は強くありません。流動性レイアウトはまだテストされていません。時間があれば試してみます。以下は、このレイアウトのコードです。
<！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>
<head>
<メタhttp-equiv = content-type content = text/html; charset = utf-8″ />
<Title>マルチコラムレイアウトにULを使用</title>
<style type = text/css>
* {マージン：0;パディング：0;}
体 {
幅：100％;
高さ：100％;
背景：#ddedfb;
}
#mainContent {
幅：600px;
マージン：10px Auto;
}
＃ヘッダー、＃フッター{
背景：＃8AC7FA;
高さ：80px;
クリア：両方;
}
#footer {
クリア：両方;
パディングトップ：10px;
}
＃コンテンツ {
高さ：300px;
マージン：10px Auto;
}
#content ul {
リストスタイル：なし;
高さ：100％;
}
#content ul li {
幅：150px;
高さ：100％;
背景：＃8AC7FA;
フロート：左;
}
#content ul li＃li2 {
幅：280px;
マージン：0 10px;
}
#content ul li＃li2ul li {
幅：270px;
高さ：140px;
マージン：5px;
背景：＃0581F0;
}
</style>
</head>
<body>
<div id = maincontent>
<div id = header>これはhead </div>です
<div id = content>
<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の下に表示できます。他のブラウザはそれをテストしていません。より良い方法がある場合は、それを提案することもできます。