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

当屏幕太小时，我需要它们开始在彼此下方显示，但显然如果屏幕足够大，则所有显示都彼此相邻。

目前如果屏幕太小，盒子就会变小

这是一个 fiddle :http://jsfiddle.net/LEvzs/

Answer 1

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

如果您以百分比设置宽度，它永远不会达到需要将内容换行到下一行的地步。将其设置为 min-width 可确保它们永远不会缩小到该点以下，因此会换行。

[edit] 更新 fiddle 使其具有固定宽度，但在需要时仍然换行。

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

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