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

Posted 2020-10-01 一人庸

一、用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，下面一层层都变为内联元素。