WEBTECH 網頁設計教學站
CSS display:inline-block 可設定區塊寬度與高度
我們可以使用 css display:inline 屬性來將一些網頁元素設計成水平排列,這種技巧廣泛運用在多數的網頁設計中,例如讓兩個或多個 DIV 區塊水平排列,不過 display inline 的特性會讓排列完的區塊被後面的其它元素所以覆蓋,所以我們還必須額外增加一個 clear 屬性來清除水平排列的效果,以免其它元素網頁元素蓋到區塊造成排版錯誤,這樣設計似乎有點麻煩,所以我們可以使用 CSS display:inline-block 來讓水平排列的區塊以 block 模式呈現,這樣就不會被後面的其它元素所覆蓋,聽起來有一點複雜,不過我們可以在範例中清楚的呈現給各位看,現在我們先來看看這個 css display:inline-block 的基本語法改如何寫。

CSS display:inline-block 語法
display:inline-block;
inline-block 為 display 屬性的其中一個參數,所以語法與其它 display 屬性的用法相同。

CSS display:inline-block 區塊水平排列的範例語法
<style type="text/css">
<!--
#DIV_A{
    float:left;
    width:200px;
    height:50px;
    border:2px blue solid;
    margin-right:10px;
    margin-bottom:10px;
}
#DIV_B {
    width:100%;
    height:10px;
    border:2px orange solid;
}
#DIV_C{
    display:inline-block;
    width:200px;
    height:50px;
    border:2px blue solid;
    margin-right:10px;
    margin-bottom:10px;
}
#DIV_D {
    width:100%;
    height:10px;
    border:2px orange solid;
}
-->
</style>
<div id="DIV_A"></div>
<div id="DIV_A"></div>
<div id="DIV_A"></div>
<div id="DIV_B"></div>
<div style="clear:both;"></div>
<div id="DIV_C"></div>
<div id="DIV_C"></div>
<div id="DIV_C"></div>
<div id="DIV_D"></div>
範例的效果
我們在範例中總共準備了兩組對照,都是三個藍色框框的 DIV 區塊以及一個橘色的 DIV 區塊,我們可以很清楚的看到,第一組的三個藍色 DIV 區塊使用 float 浮動屬性讓它們水平排列,可是橘色的區塊就覆蓋上去了,必須額外在 DIV_B 中使用"clear"屬性才能避免被覆蓋的結果,接著我們看第二組,藍色區塊(DIV_C)使用的是 display:inline-block 的設定,這樣橘色區塊(DIV_D)就不用額外使用 clear 屬性也不會覆蓋上去,這就是 display:inline-block 的效果,是不是非常實用呢?

閱讀更多網頁排版的技巧

連絡我們