webrebuild.org第四届年会——金秋四城联动
大白的工作笔记 注册 | 登陆

display:inline-block 的应用

CSS代码
  1. li { display:inline-blockwidth:270px; min-height:180pxvertical-aligntop;   *display:inline; _hiehgt:180px;zoom: 1;}   
首先看这行代码

这行代码有啥用呢?  实际上我在产品布局的时候希望 产品呈方块形一个个排列,一行N个,一共x行。

但是我们知道如果我们使用浮动的话 必须给li定高,要不然 不等高会导致下一行出现错位。原因是 在统一行多个浮动始终会以最高的那个为标准来确定是否换行。 至于为什么要浮动,而使用inline, 主要是我们希望li这个元素拥有block状态下的一些属性。以便更好的控制。

而使用inline-block 可以实现有lnline的显示方式,但是又有block的属性。 但是这个属性版本性支持不理想。

首先我们在ie下面使用*display:inline; zoom: 1;来模拟。 display 可以让对象实现在一行显示, zoom可以让对象获得layout,从而拥有black状态的一些属性。 

vertical-align: top; 解决li之间上下对其的问题

min-height:180px; 主要是让默认状态实现统一的一个高度。

 _hiehgt:180px; 让ie6实现 min-height

 

 

 

« 上一篇 | 下一篇 »

Trackbacks

点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5

发表评论

评论内容 (必填):