W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS - inline-block



inline-block 值

它有可能很长一段时间来创建一个网格箱填充浏览器宽度包好(当浏览器大小),通过使用 float 属性。

但是,display 属性的 inline-block 值使此更容易。

内联块元素就像内联元素,但它们可以有一个宽度和高度。

Examples

旧方式 - 使用 float

Example

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

.after-box {
    clear: left;
}
尝试一下 »

同样的效果可以通过使用 inline-block 值的 display 属性:

Example

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