CSS行内块



inline-block 值

多数情况下,用来创建一个填充浏览器宽度和包装良好的网格框(当浏览器大小改变时), 使用 float 属性.

然而,display属性的 inline-block 值,能更容易的实现它.

inline-block 元素像内联元素,但它们可以有宽度和高度。

实例: 老办法 - 使用 float (注意,我们还需要在浮动框之后为元素指定一个clear属性):

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

.after-box {
    clear: left;
}

让我试试

使用display属性的inline-block值,也能达到这种效果。(注意:clear属性不是必须的)

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

让我试试