幾天在用CSS寫三列佈局的時候突然想到的這樣一個方法，這個想法自己都覺得有些瘋狂，如果其中有什麼不對的地方請各位不吝指教。
當需要寫一個三列佈局的時候，一般情況下我會選擇使用如下的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」>
<head>
<meta HTTP-equiv=」Content-Type」 content=」text/html; charset=utf-8″ />
<title>使用UL進行多列佈局</title>
<style type=」text/css」>
* {margin:0; padding:0;}
body {
width:100%;
height:100%;
background:#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 {
width:150px;
height:100%;
background:#8AC7FA;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head>
<body>
<div id=」mainContent」>
<div id=」header」>這是頭部</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下都能正常顯示，其他瀏覽器未做測試，如果你有更好的方法不妨提出來。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
