inline-block 的使用

做横向布局、排序，在过去很长的一段时间内都是使用 float ，但是使用 inline-block 会更简单。

因为IE6和IE7不支持inline-block，以前想使用inline-block，可是考虑到要做麻烦的兼容，就放弃了。

假如做移动设备的web，不考虑IE6和IE7，使用inline-block还是很方便的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block</title>
<style>
*{margin: 0; padding: 0;}
.container{ width: 100%; border: 3px solid #6AC5AC; text-align: justify;}
.container div{ display: inline-block; width:25%; height: 100px; box-sizing: border-box; border: 3px solid #FDC72F; /*vertical-align:middle;*/}
.container .box_2{ height: 200px; }
.container .box_7{ height: 200px; }
</style>
</head>
<body>
	<div class="container">
		<div class="box_1">box_1</div><div class="box_2">box_2</div><div class="box_3">box_3</div><div class="box_4">box_4</div><div class="box_5">box_5</div><div class="box_6">box_6</div><div class="box_7">box_7</div><div class="box_8">box_8</div>
	</div>
</body>
</html>

display:inline-block 其实说白了，就是定义为行内的块级元素。

基于display:inline-block的列表布局可以让列表元素不等高，

布局可以参考：http://zh.learnlayout.com/inline-block-layout.html

需要注意的点

1、如果HTML源代码中元素之间有换行或空格，那么列与列之间会产生空隙。

空隙的问题参考：http://www.zhangxinxu.com/wordpress/2010/11/拜拜了浮动布局-基于displayinline-block的列表布局/

2、CSS行内文本属性影响inline-block元素，这就是好处，我们可以在父元素使用 vertical-align、text-align 等进行布局。

相反，要使用display:inline-block/ text-align:justify实现列表的两端对齐布局，HTML源代码中元素之间要有换行或空格

参考：http://www.zhangxinxu.com/wordpress/2011/03/displayinline-blocktext-alignjustify下列表的两端对齐布局/

没有一一去验证，不展开深究了，我这么理解的，元素之间没有换行或空格，浏览器视连在一起的元素为一个整体，

元素之间有换行或空格，浏览器视其为一个分散的小块。

猜你喜欢