display: inline-block

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

困難的方法（使用 float）

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

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我在漂浮！

</div>

我使用 clear，所以我不會浮動到上面那堆盒子的旁邊。

</div>

容易的方法（使用 inline-block）

你可以用 display: inline-block; 來實現相同效果。

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

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

我是一個行內元素（inline-block）

</div>

<div>

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

</div>

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

Ads by Bocoup