html - CSS 最小高度不保持 div 内联

Question

我将这个 CSS 代码用于媒体查询:

.clearfloat {
    clear: both;
    font-size: 1px;
    height: 0;
    line-height: 0;
}
.box-container {
    width:100%;
    text-align:center;
}
.icon-box {
    width:32%;
    max-width:500px;
    display:inline-block;
    border:1px solid #CCC;
    margin-top:10px;
    margin-bottom:10px;
}

@media screen and (max-width: 990px) {
    .icon-box {
        width:290px;
    }
}
@media screen and (max-width: 960px) {
    .icon-box {
        width:270px;
    }
}

@media screen and (max-width: 880px) {
    .clearfloat {
        display:none;
    }
    .icon-box {
        width:80%;
        margin:0 auto 0 auto;
        margin-top:10px;
        margin-bottom:10px;
    }
}

我想为每个框设置一个最小高度，但是当我添加它时，框不会显示为内联

这是一个带有完整 CSS 和 HTML 代码的 fiddle :http://jsfiddle.net/aAtk5/1/

Answer 1

将 min-height 设置为 .icon-box 似乎工作正常。 http://jsfiddle.net/aAtk5/5/

.icon-box {
    min-height:50px;
    ...
    ...
}