display:inline-block的实际应用

前面一篇博文有讲关于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的实际应用