inline-block

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

困难的方式(使用浮动)

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

<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="box">

我在浮动!

</div>
<div class="after-box">

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

</div>

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

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

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

<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div class="box2">

我是一个行内块!

</div>
<div>

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

</div>

你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西,你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣,可以在前面那个链接中找到更详细的信息。否则我们就继续下去吧。

  • 关于本站