CSS min-height不保持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代码的小提琴：http://jsfiddle.net/aAtk5/1/

Answer 1

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

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