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 的效果，是不是非常實用呢？

閱讀更多網頁排版的技巧
© Copyright webtech.tw Since 2010