你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 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
的东西,你只需要知道那是用来支持旧浏览器的。