CSS display:inline-block 效果

CSS display:inline-block 的效果可以讓許多區塊自動浮動起來水平排列，而且不需要額外設定 clear 也不會讓接著的元素浮上來蓋住區塊，這樣說起來有點抽像，在傳統的設計 DIV 區塊水平排列的時候，網頁設計師通常會採用 CSS 的 float 屬性，讓每個 DIV 區塊產生浮動的效果，這樣就可以讓許多區塊呈現水平排列，可是很容易造成這些區塊以外的區塊也浮動上來，所以網頁設計師會額外在區塊群的最後加上 clear 屬性，清除後面的浮動的效果，display:inline-block 的效果就是可以讓我們不用額外設定 clear 屬性，後面的區塊也不會蓋上來。

CSS display:inline-block 語法
display:inline-block;
用法與一般的 display 屬性值一樣，inline-block 僅是 display 屬性的其中一個參數。

CSS display:inline-block 實際範例一、先用傳統的設計方式
<style type="text/css">
<!--
#TestDIV1{
    float:left;
    width:200px;
    height:50px;
    border:2px #ccc solid;
    margin-right:10px;
    margin-bottom:10px;
}
#TestDIV2 {
    clear:left;
    width:100%;
    height:10px;
    border:2px orange solid;
}
-->
</style>
<div id="TestDIV1"></div>
<div id="TestDIV1"></div>
<div id="TestDIV1"></div>
<div id="TestDIV2"></div>
範例的結果
範例一是傳統的區塊浮動設定方式，單純的使用 float 屬性，在橘色的 TestDIV2 區塊內必須加上 clear 屬性，否則橘色的 TestDIV2 區塊會壓到上面的三個灰色框框 TestDIV1 區塊，接著我們來看看如何用 display:inline-block 創造出同樣的效果。

CSS display:inline-block 實際範例二
<style type="text/css">
<!--
#TestDIV3{
    display:inline-block;
    width:200px;
    height:50px;
    border:2px #ccc solid;
    margin-right:10px;
    margin-bottom:10px;
}
#TestDIV2 {
    width:100%;
    height:10px;
    border:2px orange solid;
}
-->
</style>
<div id="TestDIV3"></div>
<div id="TestDIV3"></div>
<div id="TestDIV3"></div>
<div id="TestDIV2"></div>
範例的結果
範例二中的灰色框框 TestDIV3 區塊裡使用了「display:inline-block;」的效果，這時候我們的橘色 TestDIV2 區塊不需要使用 clear 屬性就能創造出與範例一相同的效果，這就是「display:inline-block;」的特色。

CSS display:inline-block 的效果與 display:inline 有點類似，不過 display:inline-block 可以設定元素的寬度與高度，功能比較強大。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012