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;
}

让我试试