CSS Div盒子不会在彼此之下

Question

我在我的主页上使用这个CSS代码几个div框：

#homepagebox {
    width:80%;
    margin:0 auto 0 auto;
}
#homepagebox .column {
    float: left;
    width: 25%;
}
#homepagebox .column div {
    margin: 15px;
    min-height: 300px;
    max-height:300px;
    color:#ffffff;
    background: #666666;
    border-radius:10px;
}

当屏幕变得太小时，我需要它们开始在彼此之下显示，但显然如果屏幕足够大，那么所有屏幕都显示在彼此旁边。

此刻，如果屏幕太小，盒子就会变小

这是一个小提琴： http ： //jsfiddle.net/LEvzs/

Answer 1

#homepagebox .column {
    float: left;
    min-width: 25%;
}

如果以百分比形式设置宽度，则永远不会达到需要将内容包装到下一行的程度。 将其设置为最小宽度可确保它们永远不会收缩到该点以下，因此会换行。

[edit]更新小提琴有一个固定的宽度，但仍然需要时换行。

#homepagebox .column {
    float: left;
    width: 25%;
    min-width: 200px;
}

http://jsfiddle.net/LEvzs/2/