需求
无论是电商网站展示商品列表还是个人博客展示文章列表，或者是社交站点展示好友列表，往往会遇到自适应列表布局的需求，本文介绍一种使用inline-block布局的方法。
block,inline和inlinke-block细节对比
● display:block
a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
b. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
c. block元素可以设置margin和padding属性。● display:inline
a. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
b. inline元素设置width,height属性无效。
c. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。● display:inline-block
a. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
IE6/IE7下对display:inline-block的支持性不好
1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；
2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；
对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性）
IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE6下块元素如何实现display:inline-block的效果？
有两种方法：
1、 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：
div { display:inline-block; _zoom:1;_display:inline;} /推荐/
div { display:inline-block; _zoom:1;display:inline;} /推荐:IE67*/
text-jusyify下的inline-block自适应列表布局实例页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="text-jusyify下的inline-block自适应列表布局" />
<title>text-jusyify下的inline-block自适应列表布局</title>
<style>
.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;padding-bottom: 0;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
i.list{padding-bottom:0;}
.fix-justify{font-size:0;}
</style>
</head>
<body>
<h1>text-jusyify下的inline-block自适应列表布局实例页面</h1>
<div class="demo">
<div class="box">
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述，另外一些描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<div class="list"><img style="width:100px;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2569254890,3462267034&fm=58" /><br />这是一段文字描述</div>
<span class="fix-justify">
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i>
<i class="list"></i></span>
</div>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。