最新的Web開發教程
 

CSS佈局- inline-block


inline-block價值

它有可能很長一段時間來創建一個框的網格,填補了瀏覽器的寬度,並很好地包裹(當瀏覽器大小),通過使用float屬性。

然而, inline-block的值display屬性使這個更容易。

inline-block元素像內聯元素,但他們可以有寬度和高度。

例子

老方法-用float (請注意,我們還需要指定一個clear浮箱後元素屬性):

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    clear: left;
}
試一試»

同樣的效果可以通過使用可以實現inline-block的值display屬性(注意沒有clear需要屬性):

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}
試一試»