CSS代码
- li { display:inline-block; width:270px; min-height:180px; vertical-align: top; *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





