display: inline-block

你可以建立一堆區塊自動填滿瀏覽器,在過去很長的一段時間大家都使用 float 來做流動式的自動排版,但現在你可以選擇 display: inline-block 來實作,這方法會更加簡單。使用 display: inline-block 的元素就像 display: inline 的元素一樣,但你可以設定 widthheight 屬性。讓我們看看以下的例子:

困難的方法(使用 float)

.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">

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

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

我是一個行內元素(inline-block)

</div>
<div>

這次我不需要用 clear 屬性了。讚!

</div>

要使用 inline-block 你得額外做些事來支援 IE6 和 IE7。有些時候人們談到 inline-block 會觸發所謂 hasLayout 的東西,你只需要知道那是用來支持舊版 IE 瀏覽器用的。如果你對此很感興趣,可以在上面那個超連結中找到更詳細的資訊。否則我們就繼續下去吧。

  • Creative Commons License