基于display:inline-block的列表布局

Posted 一人庸

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于display:inline-block的列表布局相关的知识,希望对你有一定的参考价值。

一、用float(浮动)实现列表布局的局限

  一说起列表布局。大家首先想到的就是用浮动float。这是相当常见的也是目前最最主流的列表布局方式,所以这里就不吃咸鱼蘸酱油——多此一举了。对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐,此原因是属于恶魔系的float属性破坏了inline box。如下图:

  

  浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。

二、表格实现列表布局

  在表格布局时代,基本上不用担心列表元素高度不一会错位的问题,表格中的单元格(td标签)自动会等高关联,且水平列表项还包裹在tr等标签中,所以,不可能发生错位。所以,很正常的,我们会想到利用类似table属性的样式进行一些布局,例如display:table; display:table-row; display:table-cell;等属性,如果不是受制于IE6/7对这些display属性不支持,基于display:table的CSS布局定会大放异彩的。

  如果想使用display:table的CSS布局来代替浮动布局,权衡来看,不见得有提高。好的地方在于,不要担心列表元素的高度不一,甚至自动等高。撇开兼容性不谈,其还有不足在于在后台循环输出时需要水平repeat下,然后再垂直repeat。既然这样,还不如使用浮动布局,因为在这种情况下,使用浮动也是可以不用担心高度不一的问题的。所以,基本上,使用display:table的CSS布局来代替浮动布局是完全占据下风的。

三、另外一种display属性,display:inline-block

  display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以可以置身于inline水平的元素中。可谓黑白通吃,左右逢源。

  inline-block属性的元素适用于inline box模型,所以,当其中的列表元素高度不一时,是不会有错位的。一言以蔽之,就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes,这个line box的高度由里面最高的元素决定。所以,即使inline-block属性的列表元素高度异常,撑开的是整个line boxes的高度,因而,不会与下一行的列表元素发生错位。如下示意图所示的:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

对于IE8+以及现代浏览器,直接使用: {display:inline-block;} 

对于IE6/7浏览器, *display:inline; *zoom:1; 

所以兼容写法: display:inline-block; *display:inline; *zoom:1; 

四、一点小阻挠:inline-block元素间的换行符空格间隙问题

在完整的展示兼容性的像素级的inline-block元素列表布局前,有必要讲讲使用display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”。

如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。真正的inline-block元素,就像个图片一样。例如,两个不在一行的img标签,形成的两个图片之间就会有间隙,如下图所示:

去除inline-block间距的方法有很多。这里只用一种方便的写法: font-size:0; 。这个IE6/7/8 都是兼容的。之前倒是谷歌Chrome不兼容font-size:0;,不过现在也兼容了。

五、总结:

大盒子(big-box)里装着小盒子(litter-box)

big-box  -->     big-box {text-align:center; font-size:0;}    内部小盒子居中显示

        big-box {text-align:justify; text-justify:distribute-all-lines;}   内部小盒子两端对齐。(若内容不够一行,则不会有效果,即使你强制换行也没用)。text-justify是IE兼容写法。

        span{ display:inline-block; width:100%;} 在内部小盒子中加入一个span元素,给予这个css样式,可以规避内容不够一行的情况。

litter-box -->    litter-box {display:inline-block; *display:inline; *zoom:1; vertical-align:top;}    抛弃浮动。这里vertical-align是小盒子的对齐方式。*XXX是IE兼容写法。

  如果是多层套用。则最外层元素写text-align,下面一层层都变为内联元素。

 

以上是关于基于display:inline-block的列表布局的主要内容,如果未能解决你的问题,请参考以下文章

display:inline-block两端对齐 实现列表

display:inline-block 无序列表布局的文字错位问题及解决方法

将无序列表居中

新手必踩坑之display: inline-block

display:inline-block/text-align:justify下列表的两端对齐布局

列表的响应式排版