前面一篇博文有讲关于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; /* 将解释性文字隐藏 */
}
分享到:
相关推荐
NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/551754
NULL 博文链接:https://hc24.iteye.com/blog/832493
在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,它可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在同一行内,允许空格。本文向大家描述一下CSS属性...
建立一个宽度很长的一个页面,里面包含许多列,外面的div块的宽度不能确定,若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行,下面与大家分享下display:inline-block的使用示例
NULL 博文链接:https://tianqiushi.iteye.com/blog/2101378
但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。...
在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,大都会对这一属性感觉很迷惑和模糊,本文将详细介绍,需要了解的朋友可以参考下
display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最...
在IE6和IE7中这个版本的IE流量器中,对display:inline-block属性支持不佳,下面为大家准备两种方法可以解决此问题,让IE6/IE7 支持 display:inline-block 的方法,感兴趣的朋友可以了解下
在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象,但是...
为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度...
基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。 内容区声明的宽度不能大于容器的100% 减去0.25em...
啊,inline-block,挺难琢磨并且迷人的声明上承诺了很多,其实提供了很少。很多次我拿到类似这样的 PSD 文件: 就哭了。 一般说来,这种类型的布局是小菜一桩。固定宽度,固定高度,向左浮动就解决了。但是,这个...
ie6,ie7的haslayout属性是个让人头疼的问题,想到一个属性display:inline-block;对!inline- block就是干这个事的,让一个元素既不换行又具有block元素的特性