使用項目列表創建No div, No float, No clear的網頁佈局

之前寫過「使用CSS+Div佈局網站」，透過float與clear屬性搭配，完成網頁佈局，也一直都是我在實務經驗上使用的方法。這幾天發現國外有人提出「No div, no float, no clear, no hack*, no joke!」這樣的訴求，目的是少用float屬性，以減少IE上的bug！沒有Div、沒有Float與Clear，還真是別開玩笑啊！（no joke！）

其實，我使用float與clear到現在，IE for Win倒是沒出現什麼問題，至少在網頁佈局上是這樣的。

到底如何「No div, No float, No clear」來製作網頁佈局呢？原理是使用列表項目來達成這個目的！也就是使用<ol><li></li></ol>，並配合dispaly:table這樣的屬性。

我自己這裡試過一下，是真的可行！不過仍然需要一些CSS hack！
Html代碼如下，像這樣佈局：

<ol id="main-wrap">
<li id="tw">Head</li>
<li id="cw">
<ol id="content">
<li class="left">section left</li>
<li class="center">section center</li>
<li class="right">section right</li>
</ol>
</li>
<li id="fw">Footer</li>
</ol>


然後加上CSS：

#main-wrap{
list-style:none;
width:900px;
border:3px double #ccc;
margin:15px auto;
padding:2px;
}
#tw,#fw{
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
background-color:#33CCCC;
overflow:hidden;
margin-bottom:5px;
}
#cw{
display:table;
table-layout:fixed;
margin-bottom:5px;
}
#content{
display:table-row;
list-style:none;
*margin-top:-17px;
}
.left, .right, .center{
display:table-cell;
*display:inline;
*zoom:1;
vertical-align:top;
padding:5px;
color:#333;
}
.left{
width:190px;
background-color:#CCCCCC;
}
.right{
width:240px;
background-color:#CCCC99;
}
.center{
width:440px;
background-color:#99CCCC;
}


紅字部份則是重點。透過將『.left, .right, .center』等元素加入『display:table-cell』屬性，在FireFox底下就已經完成佈局了！但是為了IE，還必須加上CSS hack，『*display:inline; *zoom:1; vertical-align:top;』原理其實很簡單！

可是這樣一來還沒開始填裡面的東西，html原始碼與CSS就已經一大串了！純屬創意之作吧！感覺不是很實用。不過也提供另一種思考模式，可以不用老是只想到Div了！

這裡有更詳細的說明唷！