display:inline-block; 到底是个啥玩意?
css吧
全部回复
仅看楼主
level 5
看了半天也没搞懂,能不能讲的通俗点?
2013年05月30日 06点05分 1
level 7
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 (准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性) [滑稽]
2013年05月30日 06点05分 2
长姿势了~
2013年05月30日 06点05分
那呈递为内联对象,是个什么效果?
2013年05月30日 07点05分
就是行内元素呀,
2013年05月30日 07点05分
说实在的inline-block还真没用过 但是从写法上还是可以理解它的意思的
2013年06月11日 02点06分
level 6
我来说句人话吧。
display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。
说概念太模糊,来个真实案例吧。
<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
A默认就是一行,所以inline用在这里是废的。宽高度设置也是费的。
<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。
<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
这样就是同时达到块状,而且在同一行显示。
2013年05月30日 09点05分 6
通俗易懂啊,有的资料就喜欢用些专用术语,把别人搞晕了
2013年06月11日 02点06分
说得好!说得明白!
2014年01月23日 12点01分
是滴啊 一看就明白了 太感谢了!!
2014年02月14日 09点02分
嗯,好东西!顶一下!
2014年02月16日 13点02分
level 12
学习了
2013年05月31日 04点05分 7
level 9
[黑线] 不就是只有宽度的行内快级元素么
[爱心]  吾等前方,绝无敌手!
                [--蓝染惣右介]
[彩虹][彩虹][彩虹]------[来自MIUI V4 个人定制版]
2013年05月31日 05点05分 8
level 8
学习了 涨姿势了
2013年05月31日 06点05分 9
level 5
设置了浮动或者定位的元素的display为inline-block;
所以我们很喜欢用浮动布局和定位布局啊,亲
摸摸哒,教我js[花心]
2013年06月11日 13点06分 10
level 7
别人说的是经验,自己动手才能真正的理解这个概念
2014年02月14日 15点02分 12
level 7
简单来说就是将块文件横排显示
2014年02月16日 00点02分 13
level 9
转为行内快(可以设宽高,不独占一行)
2014年02月16日 03点02分 14
level 11
学习了
2014年02月16日 03点02分 15
level 7
我来补充一下兼容性问题把。ie6,7不支持display:inline-block。可在后边加上ie6,7的hack
display:inline;//行内元素,使之具有内联元素的特性
zoom:0;//触发ie浏览器的haslayout,使之可以设置宽高
2014年02月16日 12点02分 16
说ie6,7不支持display:inline-block,这话说的有点绝吧。只是不支持原本是block的转换成inline-block而已!之前做过测试的,原文地址:http://www.yilingsj.com/div/2013-08-02/64.html
2014年08月02日 13点08分
可以再通俗易懂嘛,如何兼容各主流浏览器呢?
2016年02月06日 04点02分
level 12
就帮你顶一下吧
2014年02月16日 23点02分 17
level 9

既有 inline 的特性,如 text-align
又有 block 的特性,如 width
-------------------------
Jedes Wort ist ein Vorurteil.
2014年02月20日 16点02分 18
level 12
我什么都不知道,只能帮你顶一下啦
2014年02月21日 15点02分 20
level 5
不憧
2014年02月22日 00点02分 21
level 1
[呵呵]
2014年08月26日 12点08分 22
1 2 3 4 尾页