使用inline-block解決box高度不一導致無法正常float排列的問題

我們經常使用div建立多個box,再將box float:left來進行排列,但如果box中的資料長短不一,會令各個box的高度不相同而導致各行的排列不整齊,這個問題相信很多人都遇過。讓我們來看看解決的辦法。

假設我有一個ul:

<ul>
   <li>字數很短..</li>
   <li>這個卻字數很長,所以這個高度就變高了</li>
   <li>字數很短..</li>
   <li>字數很短..</li>
   <li>字數很短..</li>
   <li>字數很短..</li>
   <li>字數很短..</li>
   <li>字數很短..</li> 
</ul>

然後我們將各個li都變成一個box:

<style>
li{
width:200px;
min-height:200px;
float:left;
}
</style>

字數特別長的box,他的高度也會變得比其他的box高..所以就會導致排列不整齊的問題了,這時我們就可以使用inline-block來解決問題:

<style>
li{
width:200px;
min-height:200px;
display:inline-block;
margin:5px;
}
</style>

設定完成後,如果你使用firefox3或safari3瀏覽,會發現情況已經有改善了,只是上下沒有對齊,這時我們只需要加上vertical-align來對齊就可以了:

<style>
li{
width:200px;
min-height:200px;
display:inline-block;
vertical-align:top;
margin:5px;
</style>

好,完成了,但是firefox2跟ie好像還是有點問題,我們來為每個browser做針對性的設定吧:

<style>
li{
width:200px;
min-height:200px;
display:-moz-inline-stack; /*這個是給firefox2看的 inline-stack*/
display:inline-block;
vertical-align:top;
margin:5px;
zoom:1; /*給ie看的,讓ie知道他是一個block*/
*display:inline; /*給ie7看的.*/
_height:200px; /*給ie6看的,這是ie6的min-height.*/
</style>

DONE,問題已經解決。