2288浏览量

inline-block

来源: 时间:2014-12-30

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择,但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子:

困难的方式(使用浮动)

.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; } 

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在浮动!

我在使用 clear,所以我不会浮动到上面那堆盒子的旁边。

容易的方式(使用 inline-block)

你可以用 display 属性的值 inline-block 来实现相同效果。

.box2 { display: inline-block; width: 200px; height: 100px; margin: 1em; } 

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

我是一个行内块!

这次我可没有用 clear 。太棒了!

你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西,你只需要知道那是用来支持旧浏览器的。

联系我们

一次需求提交或许正是成就一个出色产品的开始。
欢迎填写表格或发送合作邮件至: qczsky@126.com

大理青橙科技

电话:13988578755 13988578755

邮箱:qczsky@126.com

地址:大理市下关龙都春天10层

如果您无法识别验证码,请点图片更换