前面一篇博文有講關于display:inline-block在FF出現空白的解決方案，這篇博文主要講解下display:inline-block的實際應用。

?

應用一 如下圖所示。當固定寬度，固定高度，向左浮動float:left就解決了。但是，這個設計中內容是可變的，也就意味著當內容增多，高度不一就會破壞這個布局。

你也許會想到每一行三個放在一個UL里，然后程序員3*N的循環，現在用display:inline-block來解決這個問題

?

?

?

    	<ul class="imgList">
	<!--循環開始-->
	<li>
	<div class="imgList_pic"><img src="images/1.jpg" alt="圖片信息"/></div>
	<div class="imgList_picTitle">照片名稱照片</div>
	</li>
	<!--循環結束-->
	</ul>
  

?

    ul,li{margin:0px;
      padding:0px;
 }
.imgList{margin:16px 16px 0px;
width:530px;
height:1%;
overflow:hidden;
font-size:12px;   
letter-spacing:-6px;
}	   
.imgList li { display: -moz-inline-stack;
display:inline-block;
*display:inline;
zoom:1;
width:130px;
text-align:center;
margin:0px 22px 12px;
list-style:none;
vertical-align:top;
letter-spacing:0; /* 解決FF下display:inline-block產生空白邊*/
}		  
.imgList_pic{width:126px;
height:126px;
border:1px solid #DEE7D2;
display:table-cell;
vertical-align:middle;
/* 針對IE的Hack */
*display:block; 
*font-size:110px;
*font-family:Arial;
/* 讓未知大小的圖片在固定容器里垂直居中對齊*/}
.imgList_pic img{vertical-align:middle;}
.imgList_picTitle{font-weight:700;
 line-height:20px;
text-align:left;
margin-top:4px;
}
  

? 可以參考附件里的dome1.html文件

?

應用二 ?，有時你會遇到只要單獨的icon而不需要文字或者鏈接，并且是圖文混排的效果，我們經常會想到刪除span里的文字然后用全角空格來解決，出現這樣的代碼<a href="#" class="icon"><span>　</span></a>這也許會在后期開發過程不知何物，現在用inline-block就可以解決這個問題。

    <a href="#" class="icon"><span>MSN</span></a>
  

?

    .icon{
display:inline-block;
display:-moz-inline-stack;
/* firefox2,-moz-inline-box其實也可以，但在某些情況下會有些異常*/
*display:inline;
zoom:1;
width:16px;
height:16px;
vertical-align:middle; /* 這個用來對opera的hack，使其垂直居中 */
overflow:hidden; /* 針對ie，防止內容溺出，造成的高度及寬度改變 */
background:url("images/msn.gif") no-repeat left center;
}
.icon span{
visibility:hidden; /* 將解釋性文字隱藏 */
}
  

display:inline-block的實際應用