dispaly:inline-block

为了达到如下图所示的效果:有三种方案:

1)float:left;

2)display:table-cell;

3)display:inline-block;

dispaly:inline-block_第1张图片

第一种方案:

弊端:1)父元素清除浮动2)最关键的是:不支持不等高的排列:

dispaly:inline-block_第2张图片

所以:如果是高度确定的元素可以通过这样的方式来排列;


第二种方案:dispaly:table-cell;对于用很多li元素的情况,不适用;所有的li会充当每一个单元格,会在一排显示不会自动换行;除非人为的分行显示;dispaly:inline-block_第3张图片

3、display:inline-block;

显示的效果就是一开始的样子;

这里提一下display:inline-block的兼容性问题:

IE6、IE7不识别inline-block但可以触发块元素。

其它主流浏览器均支持inline-block。

display:inline-block;

*display:inline;

*zoom:1;



你可能感兴趣的:(dispaly:inline-block)