最常見到的相信一定是利用float浮動來使列表頁置左顯示排列，可是float卻總是有一個惱人的地方！就是當你每個列表的高度不同時，CSS會非常假會的幫你自動偵測上一排最高高度的列表作為下一排的基準點，而且沒有辦法解決這個問題，經常為了這問題寫了幾十行的CSS都沒有辦法解決，接下來介紹一組CSS，讓各位輕輕鬆鬆寫好列表頁！
放比較圖：
利用下圖可以很明顯看到float有點假會，為什麼不能像inlin-block一樣在別人的下方開始呢！！！！
以下提供CSS寫法：
HTML CODE：
＜div class="wallper"＞
＜div class="title"＞CSS－＜span class="colorRed"＞float:left＜/span＞＜/div＞
＜div class="listBlock listBlock01"＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list02"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list02"＞我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list02"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表＜/div＞
＜/div＞
＜/div＞
＜div class="wallper"＞
＜div class="title"＞CSS－＜span class="colorRed"＞dispaly:inline-block＜/span＞與class="colorRed"＞dispaly:inline ＜/span＞＜/div＞
＜div class="listBlock listBlock01"＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list02"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list02"＞我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list02"＞我是列表我是列表我是列表我是列表我是列表我是列表我是列表＜/div＞
＜div class="list list01"＞我是列表我是列表我是列表我是列表＜/div＞
＜/div＞
＜/div＞
CSS CODE：
body {
margin:0;
padding:0;
font-size:12px;
font-family:"微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif, "新細明體";
line-height:20px;
}
/*------------- 黑色內容區塊 ------------*/
.wallper {
width:600px;
background:#000000
margin:0 auto;
padding:0 50px 50px 50px;
overflow:hidden;
}
/*------------- 標題 ------------*/
.wallper .title {
width:560px;
background:#069;
color:#FFFFFF;
font-size:18px;
line-height:24px;
padding:20px;
}
/*------------- 選單區塊 ------------*/
.wallper .listBlock {
width:600px;
margin:0 auto;
overflow:hidden;
}
/*------------- 列表_文字設定 ------------*/
.wallper .listBlock .list {
width:160px;
color:#FFFFFF;
padding:10px 20px;
}
/*------------- 列表_背景顏色設定 ------------*/
.wallper .listBlock .list01 {
background:#CC0000
}
.wallper .listBlock .list02 {
background:#336600
}
/*------------- 列表_float ------------*/
.wallper .listBlock01 .list {
float:left;
margin:0 0 30px 0;
}
/*------------- 列表_inline-block ------------*/
.wallper .listBlock02 .list {
display:inline-block;
/*-- 使列表置上對齊 --*/
vertical-align:top;
margin:0 -3px 30px 0;
}
/*------------- 紅色文字 ------------*/
.colorRed {
color:#FFCC00
}
不過IE並不支援inline-block這個CSS，所以我們再針對IE來做解決
/*------------- 列表_針對IE解決問題 ------------*/
.wallper .listBlock02 .list {
/*-- for IE --*/
*display:inline;
*margin:0;
}
各位算算看，加上針對IE的兩行CSS，是不是只要寫8行就決了呢！
如果用float還要再針對列表內的各個區塊本身去寫CSS，挺麻煩的，inline-block快速解決了我們的問題!
不過所有的CSS沒有絕對一定要使用哪種寫法，必須要依各種情況來寫不同種的CSS來應對所以inline-block也不是一種絕對的方法唷！
