CSS display:inline-block 效果

CSS display:inline-block 的效果可以讓許多區塊自動浮動起來水平排列,而且不需要額外設定 clear 也不會讓接著的元素浮上來蓋住區塊,這樣說起來有點抽像,在傳統的設計 DIV 區塊水平排列的時候,網頁設計師通常會採用 CSSfloat 屬性,讓每個 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 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C