inline-block 的使用

来源：互联网发布：mac virtualbox 鼠标编辑：程序博客网时间：2024/06/01 11:09

做横向布局、排序，在过去很长的一段时间内都是使用 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下列表的两端对齐布局/

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

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

阅读全文

0 0